我们在做页面时不可避免的会碰到浏览器兼容问题,特别是 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 像素,否则我们的测试不让过,项目上不了线- -