Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

IE6、7下的双倍padding问题

  双倍margin的BUG已经是家喻户晓了,但是双倍padding的BUG仍然鲜为人知。因为它的情况比较难遇到,或者说产生双倍padding这个BUG的条件比较苛刻。这里我稍微研究了下,得到这样几个定义:
  1. 双倍padding只影响padding-top,也就是元素上方的padding。
  2. 元素的前面必须有浮动元素(left和right都可以)。
  3. 元素必须使用了clear这个CSS属性,并作用于前面的浮动元素。
  4. 元素必须使用了background这个CSS属性(image和color都可以)。
  5. 元素必须不接触容器顶部(可以给容器加上padding避免接触)。
  6. 元素必须没有触发hasLayout。
  同时满足这些条件的元素在IE6、7中就会出现双倍padding的问题。下面是代码 <!DOCTYPE html>
<style>
#p {width:86px;}
#p div {border:1px solid #F33;}
#a {float:left;}
#b {background:#FEE;clear:left;padding:10px;}
</style>
<div id="p">
  <div id="a"></div>
  <div id="b">次碳酸钴</div>
</div>

  这个效果显然padding-top的部分呈现出双倍的样子。既然我在上面已经给出了产生这个情况的条件,所以我们解决这个问题只要把上述条件中的其中一个破坏掉就行了。至于破坏哪个,那就要看项目需求了,不过一般都会使用触发hasLayout这样影响比较小的方法。也就是给元素加个这样的样式“*zoom:1;”来触发hasLayout。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^