Javascript的IE跟Firefox(火狐)兼容性 css
日期：2014-05-17 浏览次数：20802 次
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标志区别
| * | 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>
解 决方法： 通过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>
