用css hack解决IE5 IE5.5 IE6 Firefox浏览器兼容性

为了不同浏览器的观看效果，我们当然没必要为每个浏览器的不同版本写一个样式，这里我们利用“IE条件注释”。

找了一些相关的CSS HACK后，总结的几个方法。

1. 区别FF和IE

1-1
首先，当然是!important大法，可以提升指定样式规则的应用优先权，如下面的例子：

插入代码：

div{
background-color: red !important;
background-color: blue;
}

因为!important声明在IE6中并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。

1-2
还有一种方法，就是IE浏览器可以识别“>”等一些符号，如“~”、“`”、“<”等，都只有IE可以识别，但是不合理，!important是符合标准的。所以

插入代码：

div{
background-color: red;
>background-color: blue;
}

在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“>”，则应该得到的蓝色的背景，因此可以知道“>”只有IE可以识别。

这样，我们就可以把FF和IE的样式分离开。下面就是解决IE自己的问题了。

2. 区别IE5.5和IE的其他版本

看一个例子：

插入代码：

div{
>background-color: black;
>background-color /*IE5.5*/: green;
}

这个例子使用了“>”，只有IE可以识别，在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。

到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了。

3. 区别IE5与IE5.5+

插入代码：

div{
>background-color: red;
}
div/*IE5.5+*/{
>background-color: black;
}

这里我们又用到一个HACK，就是“div/**/{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；在IE5以上版本中得到的是黑色背景。

4. 完整的Hack
这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：

插入代码：

div{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
div/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}

需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”，因为“div/**/{}”这个HACK在FF中可以识别。

posted on 2008-02-22 14:07 lovablebox 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lovablebox/archive/2008/02/22/1077579.html

用css hack解决IE5 IE5.5 IE6 Firefox浏览器兼容性相关推荐

css hack解决IE5 IE5.5 IE6 Firefox浏览器兼容性
一直比较关注,最近找了一个比较全的,分享一下. 为了不同浏览器的观看效果,我们当然没必要为每个浏览器的不同版本写一个样式,这里我们利用"IE条件注释". 找了一些相关的CSS ...
css 区分浏览器,CSS Hack大全-教你如何区分出浏览器的版本
今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSSHack综合的一起,写了一个小的浏览器测试器现在的浏览器IE6- ...
解决SWFUpload在Chrome、Firefox浏览器下session找不到的问题
SWFUpload是一个非常不错的异步上传组件,但是在Chrome.Firefox等浏览器下使用的时候会有问题.问题如下:为了防止跳过上传页面直接向"接受SWFUpload上传的一般处理程 ...
对ie6、ie7、ff兼容性的详细css hack介绍
这个毛病把我憋了好久了,最近到底找到了解决滴方式,通过偶测试系完整ok滴,和大伙儿共享. 以下为引佣: 如今偶大多数全是用!important来hack,关于ie6和firefox测试可以正常卖弄,可 ...
【总结】IE6，IE7，IE8，Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
兼容ffIE678 hack(IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例)
兼容ffIE678 hack(IE6.IE7.IE8.Firefox兼容性CSS HACK代码+示例) 1.区别IE和非IE浏览器CSS HACK代码 #divcss5{ background:blu ...
CSS HACK收集：在IE6下hack的方法详解
原文:http://www.html5cn.org/article-5027-1.html + 针对IE7 * 针对ie6和ie7 _ 针对ie6 最好采用条件注释的方法本篇文章小编为大家介绍CS ...
css hack 学习总结
css hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE ...
CSS hack浏览器兼容一览表
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 屏蔽IE浏览 ...
CSS Hack汇总(转载)
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 现在浏览器的 ...

用css hack解决IE5 IE5.5 IE6 Firefox浏览器兼容性

用css hack解决IE5 IE5.5 IE6 Firefox浏览器兼容性相关推荐

最新文章

热门文章