多浏览器兼容性问题及解决方案之CSS篇

多浏览器兼容性问题及解决方案之CSS篇,第1张

概述CSS跟JavaScript开发中,最令大家头疼的问题就是浏览器兼容性了,虽然很多文章有这方面的文章,但依然让很多开发人员晕头转向,而且也不够全面。这篇文章,将全面收集css在各种浏览器下的兼容性报告,以及浏览器的渲染bug,也期待各位不断补充。 兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设…

CSS跟JavaScript开发中,最令大家头疼的问题就是浏览器兼容性了,虽然很多文章有这方面的文章,但依然让很多开发人员晕头转向,而且也不够全面。这篇文章,将全面收集CSS在各种浏览器下的兼容性报告,以及浏览器的渲染BUG,也期待各位不断补充。

兼容性处理要点
1、DOCTYPE 影响 CSS 处理

2、FF: 设置 padding 后, div 会增加 height 和 wIDth, 但 IE 不会, 故需要用 !important 多设一个 height 和 wIDth

3、FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

4、div 的垂直居中问题: vertical-align:mIDdle; 将行距增加到和整个div一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

5、在mozilla firefox和IE中的Box模型解释不一致导致相差2px解决方法:

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反,!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

浏览器差异
1、ul和ol列表缩进问题

消除ul、ol等列表的缩进时,样式应写成:List-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对firefox有效。

[注]经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置List- style:none才 能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在firefox中必须同时设置margin:0px、 padding:0px以及List-style:none三项才能达到最终效果。

2、CSS透明问题

IE:filter:progID:DXImagetransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
[注] 最好两个都写,并将opacity属性放在下面。

3、CSS圆角问题

IE:ie7以下版本不支持圆角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题,建议使用Jquery框架集来设置圆角,让这些复杂的问题留给别人去想吧。不过jquery的圆角只看到支持整个区域的圆角,没有支持边框的圆角,不过这个边框的圆角可以通过一些简单的手段来实现,下次有机会介绍下。

4、cursor:hand VS cursor:pointer

问题说明:firefox不支持hand,但IE支持pointer ,两者都是手形指示。
解决方法:统一使用pointer。

5、字体大小定义不同

对字体大小small的定义不同,firefox中为13px,而IE中为16px,差别挺大。

解决方法:使用指定的字体大小如14px。

并列排列的多个元素(图片或者链接)的div和div之间,代码中的空格和回车在firefox中都会被忽略,而IE中却默认显示为空格(约3px)。

6、CSS双线凹凸边框
IE:border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

浏览器BUG
1、IE的双边距BUG

设置为float的div在IE下设置的margin会加倍。这是一个ie6都存在的BUG。

解决方案:在这个div里面加上display:inline;

例如:

<#div ID=”imfloat”>

相应的CSS为

以下为引用的内容:

#Iamfloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/
}

关于CSS中的问题实在太多了,甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是,页面采用标准xhtml标准编写,较少使用table,CSS定义尽量依照标准DOM,同时兼顾IE、firefox、Opera等主流浏览器。很多情况下,FF和 Opera的CSS解释标准更贴近CSS标准,也更具有规范性。

2、IE选择符空格BUG

今天在给博客的段落样式设置首字符样式的时候发现,原来一个空格也可以使样式失效。

请看以下代码:

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">
<HTML xmlns="//www.w3.org/1999/xhtml">
<head>
<Title></Title>
<style type="text/CSS">
<!--
p{Font-size:12px;}
p:first-letter{Font-size:300%}
-->
</style>
</head>
<body>
<p>对于世界而言,你是一个人;但是对于某个人,你是他的整个世界。纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。</p>
</body>
</HTML>

这段代码对<p>的首字符样式定义在ie6上看是没有效果的(ie7没测试),而在p:first-letter和{Font-size:300%}加上空格,也就是p:first-letter {Font-size:300%}后,显示就正常了。但是同样的代码,在firefox下看是正常的。按道理说,p:first-letter{Font-size:300%}的写法是没错的。那么问题出在哪里呢?答案是伪类中的连字符”-”。IE有个BUG,在处理伪类时,如果伪类的名称中带有连字符”-”,伪类名称后面就得跟一个空格,不然样式的定义就无效。而在FF中,加不加空格都可以正常处理。

总结

以上是内存溢出为你收集整理的多浏览器兼容性问题解决方案之CSS篇全部内容,希望文章能够帮你解决多浏览器兼容性问题及解决方案之CSS篇所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1023596.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存