区别IE6 IE7 Firefox的css hack

本来IE6和firefox是两者关系,现在有了IE7,关系复杂多了,变成三角的了。在网上整理了一些区别IE6 IE7 Firefox的css资料。

区别IE6与firefox:
       background:orange; *background:blue;

区别IE6与IE7:
       background:green !important; background:blue;

区别IE7与firefox:
       background:orange; *background:green;

区别firefox,IE7,IE6:
       background:orange; *background:green !important; *background:blue;

注:
IE都能识别*;标准浏览器(如firefox)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
firefox不能识别*,但能识别!important;

    IE6 IE7 firefox
*   √   √   ×
!important  × √  √

下划线"_":
IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6,IE7,firefox
: background:orange; *background:green; _background:blue;

书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

3 条评论

viatop

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,
IE6下字体颜色显示为#666,
IE7下字体颜色显示为#999,并且它们互不干扰!

回复
viatop

新建一个css样式如下:
#item {width: 200px;height: 200px;background:red;}
新建一个div,并使用前面定义的css的样式:

some text here

在body表现这里加入lang属性,中文为zh:

现在对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

回复
viatop

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专用的条件注释
< ![endif]-->
< ![endif]-->

回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕