【css】解决浏览器兼容——css hack

我们在做页面时不可避免的会碰到浏览器兼容问题，特别是 ie6，那么要如何兼容所有浏览器呢，答案是 css hack。

下面的代码是我自己整理的一些常用 css hack，希望能够帮助到大家。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
 <head>  
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
     <title>css hack</title>  
     <style type="text/css">  
     .demo{width:100px;height:100px;border:5px solid orange;}  
     .demo1{  
         background:black;   /* for all */  
     }  
     .demo2{  
         background:green\9; /* for ie */  
     }  
     .demo3{  
         background:yellow\0;    /* for ie8 */  
     }  
     .demo4{  
         *background:blue;   /* for ie7,ie6 */  
     }  
     .demo5{  
         _background:red;    /* for ie6 */  
     }  
     </style>  
 </head>  
 <body>  
     <div class="demo demo1"></div><br/>  
     <div class="demo demo2"></div><br/>  
     <div class="demo demo3"></div><br/>  
     <div class="demo demo4"></div><br/>  
     <div class="demo demo5"></div>  
 </body>  
 </html>

还有一些 css hack 我没用罗列出来，譬如 chrome，opera 等等。对于这些通常情况下我们是用不到的。

测试的浏览器：ie6-9，firefox，chrome

PS：最好的 csser 就是在不用 css hack 的情况下完成所有浏览器的兼容。本人也推荐尽量避免使用 css hack，不过碰到蛋疼的浏览器（ie6）也是没有办法，往往要纠结那 1，2 像素，否则我们的测试不让过，项目上不了线- -

posted @ 2012-11-06 09:52  朱羽佳  阅读(1323)  评论(0)  编辑  收藏  举报
回顶部