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上添加注释，那显然不是懒人的习惯做法。结论如下：

css hack

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

 

posted @ 2012-09-25 14:44  China Soft  阅读(136)  评论(0)    收藏  举报