-
-5 26
-
很久很久没有接触div+css了，记得还是1年半前，接触过这玩意，那时候还有老师带，是我们一个能力蛮强的同事，做设计的，那时候学了蛮多蛮多的东西，由于公司的需要，做过很多很多套div+css，不过现在已经忘记的所剩无几了。
今天蓝风发我一个页面，是关于Firefox 与 IE 对CSS的兼容性探讨的，让我看看，看了下，蛮适用的，粘贴在这里，既便于自己以后用，也便于爱好php学习和设计制作的朋友的学习学习。
废话少说。贴贴代码吧。
关于FireFox和IE6对CSS样式的兼容性差异由来已久，它们对标准兼容的差异性，导致了大量网站开发人员的工作量加倍，不得已煞费苦心的在Firefox和IE间进行调试，对于以前很少有关注过CSS样式浏览器兼容性问题的开发人员来说，更是一件雪上加霜的事情，原本调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样式兼容性上有需要的朋友可以得到帮助。
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无法识别的标签。
通过这个表格，我们找到了一种同时区别三种浏览器对CSS支持的方法： 如“width:80px;*width:60px;_width:100px;” 希望这个好的建议可以给大学解决浏览器间的CSS样式差异提供帮助。
总结来说CSS样式兼容性问题总共有三大类： 第一类为大小显示不一致：如margin-left或者height双倍显示，空格显示等； 第二类为位置显示不一致：如div居中显示，td默认内容位置等； 第三类则比较零散，需要在特定的场景才会出现，而特定的场景往往比较复杂，所以这里只给出建议，当遇到类似问题时，不妨参考一下解决方法，以找到正确设置CSS样式一致的方案。 现举例，一一说明问题的由来，并提供重现代码，以供读者更清晰的了解导致问题的原因，以找到更好的解决方案，其中margin-left双倍显示，table、form、div自适应，table的padding，width和height的计算是经常遇到的问题。
现在就CSS这三类在项目中遇到的问题进行重现，并提出相应的解决方案。
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>
在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>
解决办法： (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>
这个问题是当初在设计导航条时遇到的问题，导航条很多时候就是横向一排div，每个div里面都是图片，就会在IE下产生了多了一点小空格的问题。
<div style="border:1px solid #FF0000;height:132px;width:100px;"> <img src="img/om.gif"/></div>
解决办法： (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>
默认字本显示问题，导致 显示的大小不一致，当你使用了 造成问题时请注意。
<table> <tr> <td>中华人民共 和国</td> </tr></table>
在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>
解决方法： 设置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>
当设置了“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>
这个问题我尚未有解决办法，所以，在使用div居中时，请注意这个问题，或者可以考虑使用table替换，不要被div居中困扰，希望能对你有帮助。
这个问题也是我们经常遇到的问题，因为在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>
解决办法： 建议在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>
先声明，这个问题的发现是在我的实际项目中遇到的，项目中是想显示一条横线，但是目前我无法重现出来，所以如果大家有遇到类似问题的时候可以参考一下。在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>
这个问题应该是大部分人都会遇到的了，先介绍一下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>
解决办法： 看到上面的示例后，可以选择用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>
在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>
解决办法： 在显示链接的时候设置cursor:pointer和text-decoration:underline;或者设置其他值，解决两个点的问题当然是把链接移动外面显示才是最好的解决方式，但由于特殊需要div必须放在链接里面时，目前不没有有效的解决方式。
<style type="text/css">a:hover{ cursor:pointer;}div{ text-decoration:underline;}</style>在CSS兼容道路上，相信前景还是很美好的，毕竟我们Microsoft在IE7和IE8支持标准的程度已经大大提高，现在写的这篇文章里只是略微阐述了对CSS兼容性的一些实践看法，希望对大家有所帮助，也希望大家提供更多的建议给我，使得本文的阐述更完善。
本文 转自：http://www.operamasks.org/article/static/ART00084.html#d0e9
本文来源于php爱好者：php教程 —http://www.phplover.cn/
原文地址：http://www.phplover.cn/post/firefox-ie-cssdejiangrongxing.html
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
2楼 beyond
Post:2010-5-28 16:50:34
1楼 大辉哥007
Post:2010-5-27 11:09:56