由于软件开发者对CSS的理解不同，造成了一些浏览器对CSS解析错误或不一致的现象，因此要针对不同的浏览器来采取一些补救措施，其中浏览器对CSS解析的问题就要有以下几个。

1、IE 5.5中的盒模型错误。

关于浏览器兼容问题，在制作过程中可能遇到最多的是IE 5.5 及更早版本的浏览器对盒模型的解析错误。

在CSS中定义的元素的宽度（width）指的是元素内容的宽度，但在IE 5.5中，认为宽度=元素内容+填充+边框，例如：

#main{
width:200px;
padding:15px;
border:2px solid #FFF;
}

那么，在IE 5.5中main层的内容宽度将是200px-2px-15px-15px-2px=166px，而在Firefox、Chrome、Opera以及IE 6.0以上等浏览器中，内容宽度则是200px，main块的宽度是200px+2px+15px+15px+2px=234px。

2、浮动和清除。

浮动（float）使元素在某些特性上从普通文档流中脱离，但同时又影响到旁边的元素。当某一个元素的子元素浮动的时候，而这个元素的高度在不同的浏览器中显示将会有所不同。

在CSS规则中并没有规定盒中何种方式是正确的，但是在实际应用中，更多的情况下，制作者更希望得到IE 中的效果，因此对于Firefox、Chrome等浏览器，需要设置CSS的清除（clear）属性。

3、在XHTML 1.1中不支持language属性。

由于在XHTML 1.1中不支持language属性，因此需要将页面代码改为：

1

<script type="text/javascript"></script>

4、IE浮动与对齐的错误。

如果在CSS中将元素的float和text-align的方向设为一致，那么在IE中的边界将会被显示为声明值的2倍。解决该问题的方法就是将元素显示的（display）属性设置改为inline，修改后的属性类似如下所示：

1
2
3
4
5
6
7

#main{
   text-align:left;
   margin:5px 10px;
   float:left;
   background:#000;
   display:inline;
}

5、IE条件注释功能。

条件注释是IE特有的一个功能，它能够对IE系列产品进行单独的XHTML代码处理。实际上IE条件注释功能非常强大，可以进行true及false的条件判断，如：

<!--[if IE]>此内容只有IE可见<![endif]-->
<!--[if IE 6.0]>此内容只有IE 6.0可见<![endif]-->

条件注释能够使IE判断使用的是什么版本的浏览器，并在符合条件的情况下显示其中的内容，从IE 5.0 到IE 8.0版本的浏览器都支持条件注释功能，而且版本号可以精确到小数点后4位，如：

<!--[if IE 5.1000]>此内容仅有IE 5.1可见<![endif]-->

除了标准判断方式之外，条件注释还支持非操作，如：

<!--[if !IE 5.0]>如果不是IE 5.0<![endif]-->

另外，条件注释还支持前缀，用于判断更高或更低的版本，如：

<!--[if gt IE 5.5]>此内容IE 5.5以上的版本可见<![endif]-->

6、ul的不同表现。

ul列表对象也是容易在IE志Firefox等浏览器之间产生问题的对象，就要原因是Firefox等浏览器对ul对象的默认值设置造成的，如：

XHTML编码：

1
2
3
4
5
6

<div id="box">
   <ul>
     <li>ul的不同表现</li>
     <li>ul的不同表现</li>
   </ul>
</div>

CSS编码：

1
2
3
4
5
6

#box{
   border:1px solid #00f;
}
ul{
   list-style:none;
}

预览效果如图所示：

Chrome上的ul效果

IE下

标准状态下两种浏览器的显示都很正常，但关键是在于对ul的设置。在为ul设置margin属性时，如：

1
2
3
4

ul{
   list-style:none;
   margin-left:0px;
}

预览效果如下图所示：

Chrome上的ul效果

IE 下

从预览效果发现，IE中ul与div靠左对齐，而Chrome中的ul却没有靠左对齐。而为ul设置padding属性时：

1
2
3
4

ul{
   list-style:none;
   padding-left:0px;
}

预览效果如下图所示：

Chrome上的效果

IE下

效果刚好相反，Chrome实现了靠左端对齐，而IE却没有实现。

通过这两个代码的对比，可以知道，在IE与Chrome中，对一部分对象有默认的属性，如h1，h2这些对象，它们本身就带有大字号、加粗样式以及一些边距效果。ul也是如此，不加任何属性时的预览效果都一样，ul对象在默认情况下是有边距的。在IE中ul的默认边距是margin决定的，而在Chrome等浏览器中ul的默认边距则是padding决定的，因此当单独定义margin、padding时就不能在两种浏览器中达到同样的效果了。

在设计带有ul对象的页面时，要使用标签选择符先统一ul的边距，如：

1
2
3
4

ul{
   padding:0px;
   margin:0px;
}

这样页面中的所有ul对象，都没有了margin、padding默认值的影响，当需要针对某一个ul进行margin、padding操作时都从0开始计算，这样就不会再出现不同浏览器显示有差异的情况了。

   声明：本文采用 BY-NC-SA 协议进行授权 | 星期九
   原创文章转载请注明：转自《常见的浏览器兼容问题》