基本 CSS 功能在 IE8 中不起作用

我在这里完全不知所措。我正在开发一个网站，需要支持大量使用 IE8 的用户。一切都可以在 IE9 及更高版本以及 Chrome、Firefox 和 Safari 中运行 - 但我一生都无法获得基本的 CSS - 例如高度属性 - 来在 IE8 中一致工作。

例如：

我的样式表中的 CSS：

#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;
}

IS 8 开发者工具显示的内容：

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

我不知道这里发生了什么！我在页面上首先声明了一个 !DOCTYPE，但这是我找到的唯一“解决方案”。据我所知，高度和填充不需要任何特殊处理，但我正在加载 Modernizr 的开发版本、最新的 Prefixfree、Selectivizr 和 REM polyfill 来尝试修复其他 IE8 问题！

您可以在以下位置查看实时页面：https://mttoday.co https://mttoday.co

我快把自己逼疯了 - 任何帮助将不胜感激！

我正在使用 REM Unit polyfill -https://github.com/chuckcarpenter/REM-unit-polyfill https://github.com/chuckcarpenter/REM-unit-polyfill。看来这个polyfill只有在我把它放在PrefixFree之前才有效（显然是因为polyfill只搜索链接的样式表，而PrefixFree将样式放在头部），但出于某种原因，这样做会产生其他事情（例如悬停菜单主页右侧）无法正常工作。猜测不同脚本之间存在冲突。

有谁知道一个polyfill脚本可以搜索链接的样式表以及头部或内联的样式？

IE8不支持rem作为单位。使用 em 或 px 代替。

http://caniuse.com/rem http://caniuse.com/rem

或者你可以这样做：

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

提供 IE8 后备。