常见的浏览器兼容问题

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

Comments(21) Leave comments
  1. Gravatar
    狒狒 Internet Explorer Internet Explorer 8.0 Windows Windows 7
    八月 23rd, 2011 at 09:29  | #1

    不错的文章很用心啊!

    • Gravatar Harid  @  八月 23rd, 2011 at 14:04 replied.

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

  2. Gravatar
    析析的小窝 Google Chrome Google Chrome 12.0.742.30 Windows Windows 7
    五月 14th, 2011 at 11:23  | #2

    学习了,呵呵、

  3. Gravatar
    等待思索 Google Chrome Google Chrome 12.0.725.0 Windows Windows XP
    五月 3rd, 2011 at 06:49  | #3

    这个主题被你改的很牛的说!!!

    • Gravatar Harid  @  五月 4th, 2011 at 02:32 replied.

      @等待思索, 正在修缮中,还有很多的细节需要更改。关键没有时间啊!

  4. Gravatar
    lazywen Mozilla Firefox Mozilla Firefox 4.0 Linux Linux
    五月 1st, 2011 at 23:48  | #4

    对前端师来说,浏览器兼容很头疼啊

    • Gravatar Harid  @  五月 4th, 2011 at 02:39 replied.

      @lazywen, 浏览器不统一规范,对Web前端工程师来说确实是一个比较让人头大的问题。

  5. Gravatar
    Suitear Google Chrome Google Chrome 10.0.648.204 Windows Windows XP
    四月 30th, 2011 at 00:28  | #5

    只考虑所有选择器事先申明为零~ 😀

  6. Gravatar
    DH Google Chrome Google Chrome 8.0.552.237 Windows Windows 7
    四月 28th, 2011 at 19:22  | #8

    IE很讨厌,。。。讨厌

    • Gravatar Harid  @  五月 4th, 2011 at 02:41 replied.

      @DH, IE是一块鸡肋……

  7. Gravatar
    C瓜哥 Mozilla Firefox Mozilla Firefox 3.6.12 Windows Windows XP
    四月 28th, 2011 at 14:44  | #9

    IE5.5?
    我可能没用过,没印象了

    • Gravatar Harid  @  五月 4th, 2011 at 02:42 replied.

      @C瓜哥, 我见有人用IE5.0的浏览器在我这留过言……

      • Gravatar C瓜哥  @  五月 4th, 2011 at 15:18 replied.  | #10

        @Harid,
        我估计他应该是用的WIN98吧 😈

        • Gravatar Harid  @  五月 4th, 2011 at 23:06 replied.

          @C瓜哥, 好像是Win 95诶,我都长见识了。

  8. Gravatar
    david Google Chrome Google Chrome 9.0.597.16 Windows Windows XP
    四月 28th, 2011 at 14:13  | #11

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

    • Gravatar Harid  @  五月 4th, 2011 at 02:42 replied.

      @david, 前面很多天都问题,中间搁置了几天。

  9. Gravatar
    美女图片 Internet Explorer Internet Explorer 8.0 Windows Windows XP
    四月 28th, 2011 at 11:30  | #12

    不懂······进来抢个沙发,楼主可怜可怜我吧,呵呵!

41 + 86 =  (required)
comment_ad

 NOTICE1: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!

 NOTICE2: 请申请gravatar头像(http://en.gravatar.com),木有头像的会显示为“小怪物”头像,将难以通过审核!

分享按钮