常见的浏览器兼容问题

Posted by Harid四月 - 28 - 2011 Leave comments

由于软件开发者对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效果

Chrome上的ul效果

 

IE下

IE下

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

1
2
3
4
ul{
   list-style:none;
   margin-left:0px;
}

预览效果如下图所示:

 

Chrome上的ul效果

Chrome上的ul效果

 

IE 下

IE 下

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

1
2
3
4
ul{
   list-style:none;
   padding-left:0px;
}

预览效果如下图所示:

 

Chrome上的效果

Chrome上的效果

 

IE下

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 协议进行授权 | 星期九
   原创文章转载请注明:转自《常见的浏览器兼容问题

    • @狒狒, 昨天晚上我把我主题的评论样式换掉了,帮忙测试一下有什么问题没有,另外不知道你能不能收到我的评论回复通知邮件?我把我以前一直用的WP-Thread-comment插件砍掉了,添加了新的邮件通知代码,不知道管不管用。

  1. 嘿嘿。。昨天来你这里,你的博客好像有问题呢。。不让评论哈。。
    今天就可以了。。嘿嘿。。


分享按钮