如何让CSS区别IE版本

时间 2019-12-17

标签如何 css 区别版本栏目 CSS 繁體版

原文原文链接

关于IE浏览器实在太坑爹了，但你又不得不去解决它，不过就本人所知，IE8—IE10差异不大，至少本人尚未遇到过在IE8环境下到了IE9及以上版本就出现坑爹的问题，但咱们又不得不面对IE8如下的版本，说实话，我也不想去处理IE所谓的Bug，但又不得不去处理。谁叫咱们都是干苦逼的职业的！css

1、CSS规则（IE CSS hacks）html

其实也只是在样式里说明一下只有IE识别的CSS规则。好比，在CSS属性前置一个”*”区分IE7和低版本，而前置一个”_”则区分IE7及低版本。可是这个方法最好别用（不是我不推荐），由于这个CSS规则还不能被W3C CSS识别（这就是坑爹之处）。浏览器

* IE8 及低版本: 在CSS属性后置”\9″, 如 height:100%\9;
* IE7 及低版本: 在CSS属性前置”*”, 如 *height:100%;
* IE6 及低版本: 在CSS属性前置”_”, 如 _height:100%;

1 .joks {
2     background: gray; /* standard */
3  
4     background: pink\9; /* IE 8 and below */
5  
6     *background: green; /* IE 7 and below */
7  
8     _background: blue; /* IE 6 */
9 }

2、给HTML加个if条件判断spa

这办法实际上是Paul Irish大神发明的。它实现的办法是经过IE条件判断来给HTML设置不一样的className，而后在CSS中经过给不一样的className下的后代设置不一样的样式便可实现。这个办法比较可行，W3C能识别。设计

1 <!--[if lt IE 7 ]> 
2 <html class="ie6"> < ![endif]-->
3 <!--[if IE 7 ]> </html>
4 <html class="ie7"> < ![endif]-->
5 <!--[if IE 8 ]>
6  </html>
7 <html class="ie8"> < ![endif]-->
8 <!--[if IE 9 ]> 
9 </html>

3、用IE条件判断语句code

其实说白了，这个方法你们都在用，并且用的人还挺多的，没办法，至少大牛们是不会这么干的（别急，大牛的方法我会讲的。）htm

IE条件判断语句也许是用的最多的区分IE版本(IE6, IE7, IE8)的办法了（我刚刚已经说了，IE8以上的版本差异不大）。看看下面用来区分IE不一样版本的代码：blog

<!--[if IE 8]> = IE8版本
<!--[if lt IE 8]> = IE7版本以低版本
<!--[if gte IE 8]> = IE8版本及高版本

1 <!--[if IE 8]>
2 <style type="text/css">
3     /* css for IE 8 */
4 </style>
5 < ![endif]-->
6  
7 <!--[if lt IE 8]>
8     <link href="ie7.css" rel="stylesheet" type="text/css" />
9 < ![endif]-->

4、自我感受方法（大牛靠感受来作）class

这个方法我可不推荐，可是若是你了解每一个版本的Bug的话，那你到能够试试，固然了，IE6和IE7再到IE8识别的间距有所不一样，但当你设计版面的时候，我我的推荐你能够试试把间距扩大到20px以上，这样才不会出现IE间距的Bug，固然了，其它的Bug方式还有许多，这里我就不一一介绍了！至少我想说，避免Bug是不可能的，规则是死的，但方法是活的，靠的是想像力而已。hack