CSS:区分IE版本的三个方法
2011-07-25 15:34
423 查看
As much as we don't like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer. It gets frustrating when different versions of Explorer displays web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments...
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
<!--[if !(IE 9)]
<!--[if (IE 6)||(IE 7)]
IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (
IE7 or below: add an asterisk (
IE6: add an underscore (
#1 IE Conditional Comments
IE conditional comment is probably the most commonly used to fix the IE bugs for specific versions (IE6, IE7, IE8). Below are some sample code to target different versions of Internet Explorer:<!--[if IE 8]>= IE8
<!--[if lt IE 8]>= IE7 or below
<!--[if gte IE 8]>= greater than or equal to IE8
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
<!--[if !(IE 9)]
<!--[if (IE 6)||(IE 7)]
<!--[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]-->
#2 CSS Rules Specific to Explorer (IE CSS hacks)
Another option is to declare CSS rules that can only be read by Explorer. For example, add an asterisk (*) before the CSS property will target IE7 or add an underscore before the property will target IE6. However, this method is not recommended because they are not valid CSS syntax.IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (
\9) at the end before the semicolon.
IE7 or below: add an asterisk (
*) before the CSS property.
IE6: add an underscore (
_) before the property.
.box { background: gray; /* standard */ background: pink\9; /* IE 8 and below */ *background: green; /* IE 7 and below */ _background: blue; /* IE 6 */ }
#3 Conditional HTML Class
The third option, which was founded by Paul Irish, is to add an CSS class with the IE version to the HTML tag by using IE conditional comments. Basicially, it checks if it is IE, then add a class to the html tag. So to target specific IE version, simply use the IE class as the parent selector (eg..ie6 .box). This is a clever way and it doesn't cause any validation errors.
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
相关文章推荐
- CSS:区分IE版本的三个方法
- HTML5----IE低版本支持HTML5标签方法,css 浏览器网页兼容性
- JS 或css教程 识别 IE版本的几种方法
- IE6、IE7、IE8之IE多版本共存的几种方法(主要是为了测试css用)
- IE6、IE7、IE8之IE多版本共存的几种方法(主要是为了测试css用)
- 针对IE6、7、8条件注释语句(不同版本IE显示用不用css)
- IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
- 让IE支持CSS 3圆角属性的方法(转)
- 在firefox与IE下DIV+CSS Padding效果不同的解决方法
- css中判断IE版本的语句
- 在masm32中获取并显示IE版本的方法1
- IE下判断IE版本的语句...[if lte IE 6]……[endif]兼容css解释
- 区分IE各个版本的CSS hack
- DIV CSS在不同IE版本和FF以及Chrome中的兼容性差异解决方法(推荐)
- CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
- DIV+CSS排版中制作细线条的三种方法--FOR IE
- 创建IE各版本专属CSS IE中的if语句
- IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)
- CSS区分IE6,IE7,IE8,firefox 的方法汇总