IE6下的CSS问题

浏览器的兼容性一直是网站设计里一个非常让人头痛问题。要想让你写出来的CSS/XHTML代码在各个浏览器都有一致的外观表现是非常难的。还好当前主流的浏览器的数目不是太多，一般情况下只要考虑Firefox，IE，Opera，Safari，而且在我看来最新版本的浏览器，像Firefox3，IE7, Oprea9，Safari3，不断的朝着统一的标准靠近。所以一般在Firefox下显示正常的CSS/XHTML代码在IE7, Oprea9，Safari3 下都不会有太大问题。可以在IE6下通常你会发现很多问题。我觉得主要原因是，IE6对'margin','padding', 'float'的解释和别的主流浏览器不同。特别是一些默认值，比如：

1. 如果你没有给'h2'这个元素的'margin-bottom'定义，IE6会用一个比在其他主流浏览器下将近大一倍的距离。
2. 如果你给一个'div'设置的高度小于'div'实际高度小，在Firefox/IE7下会用实际高度显示'div'，但是IE6可能会给你一个过大的高度。

就像我的BLOG原先IE6下就存在这个问题，后来通过设置适当的div高度和h2的margin解决了IE6下的显示问题。

另外就是float在IE6下显示问题，比如：

1. 在DIV里有三个纵向分区，它们的position是float：left。虽然你根据规则设置好各个分区的宽度，margin和padding，你会发现IE6并不按你的设置来显示，虽然第一，第二个分区是排在第一行了，但是第三个分区却跑到了第二行。

当然，IE6和Firefox的兼容性问题还有很多，上网Google一下，你还会发现很多。我的解决办法是分两步：

1. 检查margin，padding的设置是否正确，特别是要避开我上面提到的默认值问题。
2. 如果你确认CSS设置遵照了标准，但是在IE6下还是无法正常显示。那么你可以考虑给IE6写个特别CSS设置。例如：

   <!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="/css/=ie6.css?100608-1" />
   <![endif]-->

题外话：我不明白为什么国内还有那么多人用IE6，IE6连个多标签功能都没有，多点几个链接，就会出现一堆的窗口，不觉得麻烦吗？我强烈建议大家使用用IE7或者Firefox。