Jer*_*nam 12 html css html5 internet-explorer css3
我正在研究基于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]-->
要么
<!--[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黑客和查询,IE9就会丢失.那么有没有类似的方法来实现它？还有其他推荐的做法吗？或者使用单个css hack处理所有IE和Edge版本的任何方式？
最佳实践是停止尝试支持旧的 IE 版本，除非您绝对必须这样做 - 除非您对此有明确的要求，否则您今天不需要支持 IE9 下的任何内容。甚至IE9也值得怀疑。
一旦你卸下了这个负担，你就会发现你可能实际上根本不需要太多（如果有的话）IE 特定的 CSS。如果你这样做了，它可以通过优雅的功能检测来处理，而不是黑客。
使用引导程序等流行工具还可以帮助您避免编写任何特定于浏览器的样式，因为它们会执行您真正需要的部分，并且您永远不需要真正担心它们。
我个人已经有一段时间不需要做任何 IE 特定的样式了。如果我确实发现自己需要，我的第一个调用可能是使用Modernizr 库来帮助我检测我需要支持的功能，而不是尝试执行特定于单个浏览器的任何操作。其他可以提供帮助的工具包括各种 polyfill 库，它们尝试向旧浏览器添加对特定功能的支持。当我仍然需要支持 IE8 时，我曾经非常依赖Selectivzr，它可以帮助你支持一些 IE6-8 不支持的 CSS 选择器。