您的位置：首页 > Web前端 > CSS

CSS:区分IE版本的三个方法

2013-05-29 13:31 232 查看

虽然我们从心理上都不愿意去处理IE的bug，但我们不得不面对老板和浏览者们仍然在使用IE。介于不同浏览器有不同的渲染器，这往往会使开发者们感到很沮丧。我们通常使用IE条件判断语言来处理IE的CSS问题，但其实还是有其他的一些方法来处理IE的CSS bug的。

一、IE条件判断语句

IE条件判断语句也许是用的最多的区分IE版本(IE6, IE7, IE8)的办法了。看看下面用来区分IE不同版本的代码：

* <!--[if IE 8]> = IE8版本

* <!--[if lt IE 8]> = IE7版本以低版本

* <!--[if gte IE 8]> = IE8版本及高版本

<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
< ![endif]-->
<!--[if lt IE 8]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
< ![endif]-->

二、CSS规则（IE CSS hacks）

另一个办法就是在样式文件中声明只有IE识别的CSS规则。比如，在CSS属性前置一个”*”区分IE7和低版本，而前置一个”_”则区分IE6及低版本。但是，很多时候这个方法不被推荐，因为这些CSS规则并不能被W3C CSS 验证成功。

* IE8 及低版本: 在CSS属性后置”\9″, 如 height:1000px\9;

* IE7 及低版本: 在CSS属性前置”*”, 如 *height:1000px;

* IE6 及低版本: 在CSS属性前置”_”, 如 _height:1000px;

box {
background: gray; /* standard */

background: pink\9; /* IE 8 and below */

*background: green; /* IE 7 and below */

_background: blue; /* IE 6 */
}

三、HTML条件判断，给出不同的className

第三个办法是由Paul Irish发起的。它实现的办法是通过IE条件判断来给HTML设置不同的className，然后在CSS中通过给不同的className下的后代设置不同的样式即可实现。这个办法比较可行，也不会有任何W3C验证的问题。

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航