欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Javascript的IE和Firefox(火狐)兼容性 css

程序员文章站 2022-07-14 16:58:02
...

FIREFOX与IE兼容性探讨

1. CSS样式兼容性问题的出现

关 于FireFox和IE6对CSS样式的兼容性差异由来已久,它们对标准兼容的差异性,导致了大量网站开发人员的工作量加倍,不得已煞费苦心的在 Firefox和IE间进行调试,对于以前很少有关注过CSS样式浏览器兼容性问题的开发人员来说,更是一件雪上加霜的事情,原本调CSS就是一件很烦的 事情,再加上兼容性问题的阻碍,使很多开发人员咬牙切齿,却也无可奈何。

2. CSS样式调试工具

有 句话说得好,工欲善其事,必先利其器。作为一名IT开发人员来说那就是欲想编程好,必先工具好。在C++方面有Microsoft Studio的支持,在Java方面有eclipse的支持,而对于市面上调试CSS样式的工具却不是很多,但现有的工具也基本上满足我们的需求。首先介 绍FireFox下的调试工具Firebug,这一款非常优秀的调试工具,不仅对CSS样式的调试起了所见即所得的功效,同时还支持JS的调试,DOM查 看器,控制台,可编辑Html及网络状况监视器等(JS等方面请查看其他相关文档)。对于开发人员来说,有如此好的调试工具,当然是不容错过的一件事情。 IE6下也提供了一款CSS样式调试工具IE DevToolbar,这款工具相对来说功能相对单一,但为了在IE上也能够进行CSS进行调试,这款工具也勉强派得上用场了。 由于对标准支持的不统一,IE对浏览器领域统治多年,产生了自己的一套标准,而兴起的Firefox及Google的Chrome则是对原有的标准进行了 支持,所以两者之间的冲突在所难免。现在以实例方式来说明两种浏览器之间的差异,并提供相应的解决方法。希望在浏览器CSS样式兼容性上有需要的朋友可以 得到帮助。

3. Firefox与IE的Hack介绍

Hack 是指浏览器对CSS样式某些标志的识别,通过这些识别,同一CSS属性我们可以为不同的浏览器指定不同的CSS样式,以规避浏览器不同带来的差异。 首先介绍“!important”,这是我们最常使用的Hack标识,记住,需要“!”作为开头,比如“width:80!important;”。这是 一个IE7和Firefox都能够识别的标志,加上这个标志等于相同的CSS属性上,IE7或者Firefox会优先读取这个属性,所以当需要区别IE6 和Firefox样式时可以使个标志。这也是最常用的Hack,因为IE7和Firefox支持的CSS样式标准基本一样,所以对CSS样式的兼容也基本 上相同。 其次是介绍“*”,这是一个IE能够识别的标签,而Firefox无法识别的标签,在Firefox上忽略由该标志指定的CSS样式。所以当需要区别 IE7和Firefox时可以使用如:“*width:80!important”,这也是IE6无法识别的标签。

Table 1. IE6,IE7,Firefox的对于Hack标志区别

  IE6 IE7 FireFox
* Y Y N
!important N Y Y
_ Y N N

通过这个表格,我们找到了一种同时区别三种浏览器对CSS支持的方法: 如“width:80px;*width:60px;_width:100px;” 希望这个好的建议可以给大学解决浏览器间的CSS样式差异提供帮助。

4. CSS样式兼容性问题分类

总 结来说CSS样式兼容性问题总共有三大类: 第一类为大小显示不一致:如margin-left或者height双倍显示,空格显示等; 第二类为位置显示不一致:如div居中显示,td默认内容位置等; 第三类则比较零散,需要在特定的场景才会出现,而特定的场景往往比较复杂,所以这里只给出建议,当遇到类似问题时,不妨参考一下解决方法,以找到正确设置 CSS样式一致的方案。 现举例,一一说明问题的由来,并提供重现代码,以供读者更清晰的了解导致问题的原因,以找到更好的解决方案,其中margin-left双倍显 示,table、form、div自适应,table的padding,width和height的计算是经常遇到的问题。

5. CSS兼容性案例分析及解决方案

现在就CSS这三类在项目中遇到的问题进行重现,并提出相应的解决方案。

5.1. margin-left双倍显示

margin-left在IE下双倍显示是IE裡面的一个bug,在很多种情况下会出现这种情况。现在列举一种最常见的是在两个都是float:left的Div旁,那么margin-left在IE里显示的就是两倍的。

<div style="border:1px solid #cccccc;width:600px;height:500px;float:left;">    <div style="border:1px solid #00cccc;width:100px;height:100px;float:left;margin-left:50px;">    </div></div>
Javascript的IE和Firefox(火狐)兼容性 css

解 决方法: 通过CSS的Hack标志加上“!important”来标识Firefox读取这个属性值优先,而IE6不认识这个标识,所以FireFox读取的属性 是“margin-left:50px;”,而IE6则读取“margin-left:25px”,当IE6的margin-left显示双倍时,就得到 了50px,从而避开IE6的这个bug,达到两个浏览器的CSS样式兼容。(在后面的例子中,解决方法也基本类似,主要是把关键代码标上特殊颜色,供读 者参考)。

<div style="border:1px solid #cccccc;width:600px;height:500px;float:left;">    <div style="border:1px solid #00cccc;width:100px;height:100px;float:left;margin-left:50px!important;margin-left:25px;">    </div></div>

5.2. table、form、div自适应

在 firefox里面,form里面的内容超出form的容量时也不会自动扩展form、table及div的内容,而在IE里,table、form或者 div里面的内容超出宽度时,则自动扩展外层的table、form及div,所以当我们从firefox上切换到IE6时这个问出现得比较多。

<table style="height:100px;width: 80px;border:1px solid #00FF00">    <tr><td>        <form style="border:1px solid #CCCCCC;width:80px;height:80px;">            <input type="text"/>        </form>    </td></tr></table>
Javascript的IE和Firefox(火狐)兼容性 css

解决办法: (1).固定外层table、form或者div的宽度或者高度适应内层的内容

<table style="height:100px;width:180px;border:1px solid #00FF00">    <tr><td>        <form style="border:1px solid #CCCCCC;width:170px;height:80px;">            <input type="text"/>        </form>    </td></tr></table>

(2).缩小里面的内容,小于table、form或者是div的宽度或者高度

<table style="height:100px;width: 80px;border:1px solid #00FF00">    <tr><td>        <form style="border:1px solid #CCCCCC;width:80px;height:80px;">            <input type="text" style="width:60px"/>        </form>    </td></tr></table>

5.3. IE里div下的img默认有空格

这个问题是当初在设计导航条时遇到的问题,导航条很多时候就是横向一排div,每个div里面都是图片,就会在IE下产生了多了一点小空格的问题。

<div style="border:1px solid #FF0000;height:132px;width:100px;">    <img src="img/om.gif"/></div>
Javascript的IE和Firefox(火狐)兼容性 css

解决办法: (1)、将div下的font-size设置为0

<div style="border:1px solid #FF0000;height:132px;width:100px;font-size:0px">    <img src="img/om.gif"/></div>

(2)、整合div里面的内容,使其没有空格,这样也可以使内容紧凑,这里可以看IE里面没有忽略img旁边的空格导致的问题

<div style="border:1px solid #FF0000;height:132px;width:100px; "><img src="img/om.gif"/></div>

5.4. 空格大小

默认字本显示问题,导致&nbsp;显示的大小不一致,当你使用了&nbsp;造成问题时请注意。

<table>    <tr>        <td>中华人民共&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;和国</td>    </tr></table>
Javascript的IE和Firefox(火狐)兼容性 css

5.5. IE里div里默认line-height

在IE里Div设置至少有一个line-height所以显示的时候IE下的div显示无法显示等于10px。

<div style="margin-left: 15px; border: 1px solid #FF0000; width: 60px; height: 40px;">    <div style="margin-left: 15px; border: 1px solid #FF0000; width: 20px; height: 10px;">    </div></div>
Javascript的IE和Firefox(火狐)兼容性 css

解决方法: 设置div层里的字体大小为0,则div的高度可以*设置。

<div style="margin-left: 15px; border: 1px solid #FF0000; width: 60px; height: 40px;">    <div style="margin-left: 15px; border: 1px solid #FF0000; width: 20px;height:10px;font-size:0px;">    </div></div>

5.6. div居中center

当设置了“margin-left:auto;margin-right:auto”后,Firefox里的可以居中显示div,而IE上则不可以显示居中。

<div style="width:400px;height:80px;border:1px solid #FE871A;margin-left:auto;margin-right:auto;">    测试div上内容显示的位置</div>
Javascript的IE和Firefox(火狐)兼容性 css

这个问题我尚未有解决办法,所以,在使用div居中时,请注意这个问题,或者可以考虑使用table替换,不要被div居中困扰,希望能对你有帮助。

5.7. table的padding

这个问题也是我们经常遇到的问题,因为在firefox下,table的padding实在是太好用了,当我们转到IE6上时才发现,要改过来的痛苦,所以在使用table的padding时请注意兼容问题。

<table style="width:300px;height:100px;border:8px solid #CCCCCC;padding:18px;">    <tr>        <td  style="border:1px solid #ff0000">测试Table的padding</td>    </tr></table>
Javascript的IE和Firefox(火狐)兼容性 css

解决办法: 建议在td里面使用一个div,然后设置div的margin,使其出现在td正确的位置上。

<table style="width:300px;height:100px;border:8px solid #CCCCCC;">    <tr><td>        <div style="border:1px solid #ff0000;width:200px;height:50px;margin-left:8px;">测试Table的padding</div>    </td></tr></table>

5.8. tr和td的border

先 声明,这个问题的发现是在我的实际项目中遇到的,项目中是想显示一条横线,但是目前我无法重现出来,所以如果大家有遇到类似问题的时候可以参考一下。在 Firefox下,显示的td的border-top的时候可以显示,而在IE6下则无法显示的问题,总结了一下是td显示边框的时候会出现的问题。所以 解决办法是在td里面再设置一个div来进行显示。

<table>   <tr><td style="width:300px;height:1px;border-top:1px solid #ff0000">   </td></tr></table>

解决办法:

<table>    <tr><td>       <div style="width:300px;height:1px;border-top:1px solid #ff0000"></div>    </td></tr></table>

5.9. width和height的计算

这 个问题应该是大部分人都会遇到的了,先介绍一下Firefox和IE下计算width和height的方法: 在IE下: 显示宽度=marginLeft + width + marginRight; 显示高度=marginTop + height +marginBottom; 在Firefox下: 显示宽度=marginLeft + paddingLeft + borderLeft + width + marginRight + paddingRight + borderRight; 显示高度=marginTop + padingTop + borderTop + height + marginBottom + paddingBottom + borderBottom;

<div>    <div style="width:280px;margin-left:40px;padding-left:15px;border-width: 1px 20px 1px 20px;border-style: solid;border-color:#FE871A">       测试width    </div>    <br/>    <div style="height:100px;width:200px;margin-top:40px;padding-top:15px;border-width:20px 1px 20px 1px;border-style:solid;border-color:#CCCCCC;">        测试height    </div></div>
Javascript的IE和Firefox(火狐)兼容性 css

解决办法: 看到上面的示例后,可以选择用Hack来解决兼容性问题,

<div>    <div style="width:225px!important;width:280px;margin-left:40px;padding-left:15px;border-width:1px 20px 1px 20px;border-style: solid;border-color:#FE871A">        测试width    </div>    <br/>    <div style="height:45px!important;height:100px;width:200px;margin-top:40px;padding-top:15px;border-width:20px 1px 20px 1px; border-style:solid;border-color:#CCCCCC;">        测试height    </div></div>

5.10. 链接a里面div

在firefox链接里面放一个div是在点击链接时候会莫名其妙的出现两个点(在firefox3下显示得很明显),而在IE里则显示多下横线,鼠标移过时显示的图标不一致:

<table><tr><td>    <a href="#" _fcksavedurl="#"> _fcksavedurl="#"> _fcksavedurl="#">        <div style="border: 1px #cccccc solid;height:30px;width:80px;">本地链接</div>    </a></td></tr></table>
Javascript的IE和Firefox(火狐)兼容性 css

解决办法: 在显示链接的时候设置cursor:pointer和text-decoration:underline;或者设置其他值,解决两个点的问题当然是把链接移动外面显示才是最好的解决方式,但由于特殊需要div必须放在链接里面时,目前不没有有效的解决方式。

<style type="text/css">a:hover{    cursor:pointer;}div{    text-decoration:underline;}</style>

5.11. cursor不一致

在IE中cursor:hand和cursor:pointer都显示手形,而Firefox中,cursor:hand则显示为编辑图标,只是把它当文字处理而已,若要在Firefox中显示手形,请设置cursor:pointer。

<span style="cursor:hand;">hand</span><span style="cursor:pointer;">pointer</span>
Javascript的IE和Firefox(火狐)兼容性 css

6. 总结

在CSS兼容道路上,相信前景还是很美好的,毕竟我们Microsoft在IE7和IE8支持标准的程度已经大大提高,现在写的这篇文章里只是略微阐述了对CSS兼容性的一些实践看法,希望对大家有所帮助,也希望大家提供更多的建议给我,使得本文的阐述更完善。

 

本文 转自:http://www.operamasks.org/article/static/ART00084.html#d0e9