正确的浏览器兼容写法是:FF(Opera、safari)、IE6、IE7。
下面是我写的一个例子:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>css test</title>
<style type="text/css">
.test{
border:1px solid red;
*border:1px solid blue;
_border:1px solid black;
}
</style>
</head>
<body>
<p id="a" class="test">color test</p>
</body>
</html>
这里我边框的颜色故意写不一样,以用来区别。
2、样式盒子宽度问题:
View Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>css test</title>
<style type="text/css">
.test{
border:10px solid red;
padding:30px;
width:400px;
}
</style>
</head>
<body>
<p id="a" class="test">color test</p>
</body>
</html>
因为IE5.5存在一个bug,他的盒子解释跟IE6以上或别的浏览器不同。先看下别的浏览器的宽度是怎么样的吧(下面是从FF截图下来滴):
所以这个代码的的正常宽度是:10+30+400+30+10=480px;
那么来看下IE5.5的运行结果是怎么样滴把:
IE5.5的宽度是:400px;到底是怎么算的呢?
如果只是设置宽度width为400,那么所有的浏览器都是一样,宽度都是400:
那么,如果再加个padding呢?
<style type="text/css">
.test{
400px;
padding:30px;
background:red;
}
</style>
运行结果之---
谷歌浏览器(400+30+30=460):
IE5.5(400):
那么再加上border的宽度,IE5.5也一样是400,说明IE5.5只识别这width。
sohu前段有说到一个技巧是:width(空格)/**/400px;这条语句IE5.5和IE6是可以识别的。但其他的浏览器就不能识别。下面是我做的实验:
<style type="text/css">
.test{
border:10px solid red;
padding:30px;
400px !important;
/**/480px;
}
</style>
结果IE5.5还是不能解决盒子问题,IE6的宽度又变长了。貌似这个没啥作用。