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

时间:2014-01-14 19:48:31

标签: jquery html css css3 internet-explorer-8

我在这里完全不知所措。我正在开发一个需要支持使用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;
}

IE 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

看到实况页面

我为此疯狂 - 任何帮助都会受到赞赏!

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

有没有人知道一个polyfill脚本会搜索链接样式表,以及头部或内联样式?

1 个答案:

答案 0 :(得分:5)

IE8不支持rem作为一个单元。请改用em或px。

http://caniuse.com/rem

或者你也可以这样做:

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

提供IE8后备。