css hack

CSS Hack 技巧

最新推荐文章于 2025-09-04 16:57:43 发布

lvsmaster

最新推荐文章于 2025-09-04 16:57:43 发布

阅读量765

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css ie chrome 浏览器测试 div

本文链接：https://blog.youkuaiyun.com/lvsmaster/article/details/7371927

css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了针对不同浏览器的 CSS Hack 方法，特别是 IE6 至 IE9 的特殊样式设置技巧。通过特定语法绕过各浏览器解析差异，实现精确兼容。

所有浏览器 
    通用 color:#999;
 
IE6 专用 
   _color:#000; 
    作如下文件itetest.html<style>
#test{color:#999;_color:#000;}
</style>
<div id="test">
test
</div>
    分别查看不同浏览器下的效果 
 ie6 

ie7,8,9
IE6,7 可用 *color:#000; 和*+color:#000;       <style>
#test{color:#999;*color:#000;}
</style>
<div id="test">
test
</div>
==================================
<style>
#test{color:#999;*+color:#000;}
</style>
<div id="test">
test
</div>

ie6



ie7




ie8,9




【备注】 网上好多人说*color只有ie6识别，经过测试ietest和真实版ie7，此种写法都被ie7识别，代码结果如上，如若有人结果不一样可以留言，在这儿还是不敢随便统一网上的那个说法。



关于!important
IE7、IE8、IE9、FF,CHROME 共用 
      <html>  
     <head>  
     <title>Css Hack</title>  
     <style> 
        #test{color:#999!important;color:#000;}
     </style>  
     </head>  

     <body>  
     <div id="test">test</div>  

     </body>  
     </html> 


ie6

ie7,8,9,ff,chrome

<html>  
<head>  
<title>Css Hack</title>  
<style> 
#test{color:#999!important;}
#test{color:#000;}
</style>  
</head>  
<body>  
<div id="test">test</div>  
</body>  
</html> 

ie6,7,8,9,ff,chrome效果一样 文本颜色

   
   
    
    
     
     由于csdn的编辑器实在太难用了，测试用了1分钟，在编辑器中修改样式用了2小时，我就直接贴developer tool中此元素的样式值就可以了
#test {
    
    
    
    
     
     
      
      
       
           
       
       color
       
       : 
       
       #999999 !important
       
       ;
      
      
     
     
    
    
    
    
     
     }
    
    
   
   

还有以下从网上收集的hack写法
#test{color:#999;color:#000\9;}
ie 6,7,8,9 #000;ff #999;

#test{color:#999;color:#000\0;}
ie6,7 无文本颜色定义;ie8,9 #000;ff #999;

#test{color:#999;+color:#000;}
ie6,7 #000;ie8,9 #999;ff #999;

#test{color:#999;}
:root #test{color:#000\9;}
ie6,7,8,ff #999;ie9 #000;

#test{color:#999;}
@media screen and (-webkit-min-device-pixel-ratio:0){ #test{color:#000;} } //这是css的expression不熟悉的可以看我转载的另一篇博文
chrome #000;ie6,7,8,9,ff:#999;
这些手机自网络，但都经过本人亲自测试（ie6,7,8,9,ff,chrome其他浏览器没有测试）