基本CSS功能在IE8不工作 [英] Basic CSS features not working in 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; 
} 
  

什么IE 8开发工具显示：

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

我不知道这里发生了什么！我有一个！DOCTYPE在页面上声明第一件事，但这是唯一的'解决方案'我发现。据我所知，height和padding不需要任何特殊的处理，但我加载Modernizr的开发版本，最新的Prefixfree，Selectivizr和REM polyfill尝试修复其他IE8问题！

您可以在 https://mttoday.co 查看实际页面

我正在使用REM单位polyfill - https://github.com/chuckcarpenter/REM-unit-polyfill 。看起来这个polyfill只有工作，如果我把它放在PrefixFree之前（显然是因为polyfill只搜索链接的样式表，PrefixFree放置样式在头），但由于某些原因这样做使其他事情（如悬停菜单上主页右侧）无法正常工作。猜测在不同的脚本之间有冲突。

有没有人知道一个polyfill脚本，将搜索链接的样式表，以及头部或内联中的样式？

解决方案

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

http://caniuse.com/rem

或者，您可以执行以下操作：

  #loginName {
 height：1.6em; //或另一个值
 height：1.6rem; 
} 
  

提供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?

解决方案

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.

这篇关于基本CSS功能在IE8不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！