我正在研究基于CSS的库,并且遇到了这个问题,因为它是处理它的最佳方式。
而且我知道我们都有这个问题,因为IE在标准网络方面有一些意想不到的行为。所以我的问题不仅仅是针对 Microsoft Internet Explorer ,因为 Microsoft Edge 中仍然存在一些问题。
是的,我们可以通过检测浏览器和版本来使用javascript来处理它。但整个想法是将它带到单个CSS文件。以及它的可能性。
因此使用Microsoft提供的方法或其他css hacks,
<!--[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的库时,这看起来很丑陋。
/* 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的边缘版本?
答案 0 :(得分:3)
最佳做法是停止尝试支持旧的IE版本,除非你绝对必须 - 除非你有明确的要求,否则今天你不需要支持IE9下的任何东西。甚至IE9也值得怀疑。
一旦你已经摆脱了这种负担,你就会发现你可能根本不需要非常多(如果有的话)特定于IE的CSS。如果你这样做,它可以通过优雅的特征检测而不是黑客来处理。
使用诸如bootstrap之类的流行工具也可以帮助您避免编写任何特定于浏览器的样式,因为它们会为您提供真正需要的内容,而您永远不必担心它们。
我个人无法在一段时间内完成任何特定于IE的样式。如果我确实发现自己需要,我的第一个停靠点可能是使用Modernizr library来帮助我检测我需要支持的功能,而不是尝试针对单个浏览器执行任何特定操作。其他可以帮助包含各种polyfill库的工具,尝试在旧浏览器中添加对特定功能的支持。当我仍然需要支持IE8时,我曾经发誓Selectivzr,它可以帮助你支持IE6-8不支持的一些CSS选择器。