CSS HACK用法及实例说明

作者:日期:2011-08-25 16:23:30 点击:254

 CSS HACK的方法

 
首先需要知道的是: 
 
所有浏览器 通用 height: 100px; 
IE6 专用 _height: 100px; 
IE7 专用 *+height: 100px; 
IE6、IE7 共用 *height: 100px; 
IE7、FF 共用 height: 100px !important; 
 
例如: 
 
#example { height:100px; } /* FF */ 
 
* html #example { height:200px; } /* IE6 */ 
 
*+html #example { height:300px; } /* IE7 */ 
 
下面的这种方法比较简单 
 
举几个例子: 
 
1、IE6 - IE7+FF 
 
#example { 
height:100px; /* FF+IE7 */ 
_height:200px; /* IE6 */ 
其实这个用上面说的第一种方法也可以 
#example { 
height:100px !important; /* FF+IE7 */ 
height:200px; /* IE6 */ 
 
2、IE6+IE7 - FF 
 
#example { 
height:100px; /* FF */ 
*height:200px; /* IE6+IE7 */ 
 
3、IE6+FF - IE7 
 
#example { 
height:100px; /* IE6+FF */ 
*+height:200px; /* IE7 */ 
 
4、IE6 IE7 FF 各不相同 
 
#example { 
height:100px; /* FF */ 
_height:200px; /* IE6 */ 
*+height:300px; /* IE7 */ 
或: 
#example { 
height:100px; /* FF */ 
*height:300px; /* IE7 */ 
_height:200px; /* IE6 */ 
 
需要注意的是,代码的顺序一定不能颠倒了,要不又前功尽弃了。因为浏览器在解释程序的时候,如果重名的话,会用后面的覆盖前面的,就象给变量赋值一个道理,所以我们把通用的放前面,越专用的越放后面 
 
解释一下4的代码: 
 
读代码的时候,第一行height:100px; 大家都通用,IE6 IE7 FF 都显示100px 
到了第二行*height:300px; FF不认识这个属性,IE6 IE7都认,所以FF还显示100px,而IE6 IE7把第一行得到的height属性给覆盖了,都显示300px 
到了第三行_height:200px;只有IE6认识,所以IE6就又覆盖了在第二行得到的height,最终显示200px 
这样,三个浏览器都有自己的height属性了.
 
 
*+html 对IE7的兼容 必须保证HTML顶部有如下声明: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 

上一篇: 注意5个重要方面,你也可以写出完美CSS代码

下一篇: CSS兼容性常见问题总结