CSS在IE6,IE7,FIREFOX中的区别
第一种，是CSS HACK的方法
| height:20px; /*For Firefox*/ |
| *height:25px; /*For IE7 & IE6*/ |
| _height:20px; /*For IE6*/ |
| 注意顺序。 |
| 这样也属于CSS HACK，不过没有上面这样简洁。 |
| #example { color: #333; } /* Moz */ |
| * html #example { color: #666; } /* IE6 */ |
| *+html #example { color: #999; } /* IE7 */ |
第二种是使用IE专用的条件注释
| <!-- 其他浏览器 --> |
| <link rel="stylesheet" type="text/css" href="css.css" /> |
| <!--[if IE 7]> |
| <!-- 适合于IE7 --> |
| <link rel="stylesheet" type="text/css" href="ie7.css" /> |
| < ![endif]--> |
| <!--[if lte IE 6]> |
| <!-- 适合于IE6及一下 --> |
| <link rel="stylesheet" type="text/css" href="ie.css" /> |
| < ![endif]--> |
第三种css filter的办法，以下为经典从国外网站翻译过来的。
| 新建一个css样式如下： |
| #item { |
| width: 200px; |
| height: 200px; |
| background: red; |
| } |
| 新建一个div,并使用前面定义的css的样式： |
| <div id="item">some text here</div> |
| 在body表现这里加入lang属性,中文为zh： |
| <body lang="en"> |
| 现在对div元素再定义一个样式： |
| *:lang(en) #item{ |
| background:green !important; |
| } |
| 这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式： |
| #item:empty { |
| background: green !important |
| } |
| :empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。 |
| 对IE6和FF的兼容可以考虑以前的!important</body> |
今天被在修改CSS的时候，突然碰到要单独Hack IE8的。当然，用注释非常方便，只要添加相应的注释就可以解决。但问题是，为了一句CSS写多一个文件，或者在header上添加注释，那显然不是懒人的习惯做法。结论如下：
selector{
property:value; /* 所有浏览器 */
property:value9; /* 所有IE浏览器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
}
当然，注意顺序。根据CSS的优先性，上面的写法，分别针对Firefox、IE8、IE7和IE6显示值。让我们看看这个演示：
演示的CSS代码如下：
p.ie{
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;
color:blue; // 所有浏览器
color:brown9; // 所有IE浏览器
+color:red; // IE7
_color:green; // IE6
}
哈，事实就这么简单。你看到的是那一句话呢？如果你多个浏览器都测试了，就会看到，显示的文字和颜色是不同的。为什么？看看我的HTML中这个段落是这样写的：
<p class="ie">
<span style="display:block;display:none9;">嘿嘿，小子竟然也用Firefox，蓝色文字。</span>
<!--[if IE 8]>不错不错，挺先进的嘛，使用IE8呢！文字是褐色的。<![endif]-->
<!--[if IE 7]>你，IE7，红色文字！<![endif]-->
<!--[if IE 6]>孩子，虽然显示的是绿色文字，不过，IE6可不是好东西呢！<![endif]-->
</p>
对，就是IE条件注释+CSS的结果。顺路学一下IE条件注释吧。不用再举例了吧，一看就知道那个对那个了。
源代码下载：ie-firefox-hack.zip
