您的位置:首页 > Web前端 > CSS

不同的浏览器写不同的CSS code

2014-03-04 08:20 281 查看
这个针对不同的浏览器写不同的CSS
code的过程,就叫CSS hack!


如何写CSS Hack

CSS hack:区分IE6,IE7,firefox   
区别不同浏览器,CSS hack写法:   
区别IE6与FF:   
background:orange;*background:blue;     // FF下 橙色  IE6 蓝色
区别IE6与IE7:   background:green !important;background:blue; // IE6 蓝色  IE7 绿色  
区别IE7与FF:   background:orange; *background:green;    // FF 橙色   IE7 绿色
区别FF,IE7,IE6:   
background:orange;*background:green;_background:blue;    // FF 橙色    IE7 绿色    IE6 蓝色
background:orange;*background:green !important;*background:blue;   
注:IE都能识别*;标准浏览器(如FF)不能识别*;   
IE6能识别*,某些情况下不能识别 !important, 
                          IE6    IE7    FF   
*                         √      √        ×   
!important          ×      √        √   

浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6 
=========================================================
以: " #demo {width:100px;} "为例;    

#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/   

* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */   

*+html #demo {width:130px;} /*会被IE7执行*/   
 ---------------   
所以最后,#demo的宽度在三个浏览器的解释为:   FIREFOX:100px;   ie6:120px;   ie7:130px;    

IE8 最新css hack:   
"\9" 例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.   
 "\0" IE8识别,IE6、IE7不能.  例子:同上  
"*" IE6、IE7可以识别.IE8、FireFox不能.  例子: “ *height:100px   ”  
"_" IE6可以识别"_",IE7、IE8、FireFox不能. 例子;  “  _height:100px 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: