Basic CSS features not working in IE8

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/21122608/basic-css-features-not-working-in-ie8

标签

jquery

html

css

css3

internet-explorer-8