研究sohu前台浏览器兼容标准

正确的浏览器兼容写法是：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呢？

谷歌浏览器（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的宽度又变长了。貌似这个没啥作用。