3

I am completely at a loss here. I'm developing a website that needs to support a large group of users who are using IE8. Everything works in IE9 and above, as well as Chrome, Firefox and Safari - but I can't for the life of me even get basic CSS - such as a height property - to consistently work in IE8.

For example:

CSS in my style sheet:

#loginName{
    height:1.6rem;
    display:inline-block;
    padding:0.75rem 1rem 0;
    border-radius:1.5rem 1.5rem 0 0;
    transition:all 0.5s ease-in-out;
}

What IE 8 Developer Tools shows:

#loginName{
    display:inline-block;
    transition:all 0.5s ease-in-out;
    border-radius:1.5rem 1.5rem 0 0;
}

I have no idea what is happening here! I have a !DOCTYPE declared first thing on the page, but that's the only 'solution' I've found. As far as I'm aware, height and padding don't need any special treatment, but I am loading the development version of Modernizr, the latest Prefixfree, Selectivizr and a REM polyfill to try to fix other IE8 issues!

You can see the live page at https://mttoday.co

I'm driving myself nuts with this - any help would be appreciated!

I'm using a REM Unit polyfill - https://github.com/chuckcarpenter/REM-unit-polyfill. It seems that this polyfill only works if I place it before PrefixFree (apparently because the polyfill only searches for linked stylesheets, and PrefixFree places the styles in the head), but for some reason doing so makes other things (such as the hover menu on the right side of the home page) not work properly. Guessing that there are conflicts between the different scripts.

Does anyone know of a polyfill script that will search both the linked style sheets, as well as styles in the head or inline?

Alan
  • 389
  • 1
  • 7
  • 16
  • 2
    Does looking at this help explain why it doesn't work? http://caniuse.com/rem possible polyfill: https://github.com/chuckcarpenter/REM-unit-polyfill – Kevin B Jan 14 '14 at 19:50
  • That's the same polyfill I'm already using for REM units...but maybe it's not working? I'm downloading the newest version from GitHub right now - hopefully that fixes it!! – Alan Jan 14 '14 at 20:06
  • I downloaded the latest version, which did indeed fix the REM units. There are still other pages that aren't working - such as https://mttoday.co/TestCenter - but I haven't gone through the IE8 Developer to figure out which styles aren't working. Going to do that now! – Alan Jan 14 '14 at 20:16
  • @KevinB - guess I spoke too soon. It seems that polyfill isn't correcting the REM issue after all... – Alan Jan 14 '14 at 20:33

1 Answers1

5

IE8 doesn't support rem as a unit. Use em or px instead.

http://caniuse.com/rem

Alternatively you could do something like:

#loginName{
    height:1.6em; // Or another value
    height:1.6rem;
}

to provide a IE8 fallback.

Leon
  • 1,999
  • 22
  • 38
  • Thanks for the suggestion Leon. I downloaded the updated version of the polyfill that I was using, which fixed the REM issue, but there are still other pages that are a complete mess. Have to love IE8!! – Alan Jan 14 '14 at 20:24