IE特定CSS的最佳实践是什么?

时间:2016-08-25 05:10:56

标签: html css html5 css3 internet-explorer

我正在研究基于CSS的库,并且遇到了这个问题,因为它是处理它的最佳方式。

而且我知道我们都有这个问题,因为IE在标准网络方面有一些意想不到的行为。所以我的问题不仅仅是针对 Microsoft Internet Explorer ,因为 Microsoft Edge 中仍然存在一些问题。

是的,我们可以通过检测浏览器和版本来使用javascript来处理它。但整个想法是将它带到单个CSS文件。以及它的可能性。

因此使用Microsoft提供的方法或其他css hacks,


为什么不是IE条件评论?

<!--[if lt IE 7]>  <html class="ie ie6"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7>  <![endif]-->
<!--[if IE 8]>     <html class="ie ie8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]>  <html class="ie">     <![endif]-->
<!--[if !IE]><!--> <html>                <!--<![endif]-->

OR

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

这仅支持IE9,并且最近已停止支持并引入CSS查询。我个人认为这有点混乱了html标记。因为当我们编写基于CSS的库时,这看起来很丑陋。

关于旧版本的IE特定CSS黑客&amp; IE CSS查询最新版本?

/* For IE 8 & Lower css hacks */
.some-class {
   margin-top: 10px\9 /* apply to all ie from 8 and below */
   *margin-top:10px;  /* apply to ie 7 and below */
   _margin-top:10px; /* apply to ie 6 and below */
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles */
     .some-class {
        margin-top: 10px;
     }
}

@supports (-ms-accelerator:true) {
     /* Microsoft Edge 12+ styles */
     .some-class {
        margin-top: 10px;
     } 
}

嗯,这要好得多。我个人认为,当我们编写基于CSS的库时,这更适合。因为我们不会要求用户导入多个文件并使用户感到困惑。


实际问题

如果你注意到上面的CSS hacks&amp;查询,IE9丢失了。那么有没有类似的方法来实现它?还有其他推荐的做法吗?或任何方式处理所有IE&amp;使用单个css hack的边缘版本?

1 个答案:

答案 0 :(得分:3)

最佳做法是停止尝试支持旧的IE版本,除非你绝对必须 - 除非你有明确的要求,否则今天你不需要支持IE9下的任何东西。甚至IE9也值得怀疑。

一旦你已经摆脱了这种负担,你就会发现你可能根本不需要非常多(如果有的话)特定于IE的CSS。如果你这样做,它可以通过优雅的特征检测而不是黑客来处理。

使用诸如bootstrap之类的流行工具也可以帮助您避免编写任何特定于浏览器的样式,因为它们会为您提供真正需要的内容,而您永远不必担心它们。

我个人无法在一段时间内完成任何特定于IE的样式。如果我确实发现自己需要,我的第一个停靠点可能是使用Modernizr library来帮助我检测我需要支持的功能,而不是尝试针对单个浏览器执行任何特定操作。其他可以帮助包含各种polyfill库的工具,尝试在旧浏览器中添加对特定功能的支持。当我仍然需要支持IE8时,我曾经发誓Selectivzr,它可以帮助你支持IE6-8不支持的一些CSS选择器。