10月
16
2009
IE6 BUG之padding问题
Tag：
分类：WEB标准
阅读：2920
评论：1
最近比较奇怪哦，发现了不少所谓的BUG，而且都是IE6不支持的，都快有些不太相信自己的作法了。很多东西看起来没有什么问题，但是在实际显示效果中却有相当大的效果出入。首先，大家如果看到我这里有解决不当的地方请提出来，我们大家一起改进，一起学习，先多谢了。
结构代码：
-
<ul class="test03">
<li><a href="#">Sport / Racing</a></li>
<li><a href="#">Urban / Commuter</a></li>
<li><a href="#">Touring / Street</a></li>
</ul>
style:
-
.test03{width:328px;overflow:hidden;margin:0 auto;}
.test03 li{padding-right:15px;float:left;}
.test03 li a{white-space:nowrap;background:url(michelin_banner.gif) no-repeat;padding-left:20px;}
以上结构与样式，大家可以测试一下，发现a标签中加了white-space:nowrap;后，在IE6中a标签中的padding会不再起作用了。
想来想去，也不知道其中的原因，经反复测试，试认为是a标签在li标签内，被使用了white-space:nowrap;后，文字被强制不换行，而li标签中已使用了float属性，这样以来li标签是浮动的了，而a标签并没有跟随li标签一起进行浮动，因此可以认为它们不是一个层次的标签了。那么，现在开始看一下我的解决办法：
我的第一种解决办法:
-
.test03{width:328px;overflow:hidden;margin:0 auto;}
.test03 li{padding-right:15px;float:left;background:url(michelin_banner.gif) no-repeat;padding-left:20px;}
.test03 li a{white-space:nowrap;}
经测试可以达到所要的效果。但是有一个问题，如果所需的背景是重复的，那可就麻烦了，或是背景需要比较大一些的，这样的话后面不需要出现的地方也会出现，不一定会达到理想的效果。
我的第二种解决办法:
-
.test03{width:328px;overflow:hidden;margin:0 auto;}
.test03 li{padding-right:15px;float:left;}
.test03 li a{white-space:nowrap;background:url(michelin_banner.gif) no-repeat;padding-left:20px;float:left;}
这种办法大家不难想到，其实就是将a标签的属性与li相同，处在同一层次。个人认为还是这种方法比较好一些。呵呵……解决到最后，问题还是与float有关啊。
本次问题就说到这里了，欢迎大家继续发现。下次再见。
评论
i found the same questions
添加评论