打印

table对padding和margin的解释应该是怎么一回事的?

先看一下这个例子先

 提示:您可以先修改部分代码再运行
在这个例子中没有给table设置相关属性;IE下和FF下无异。

 提示:您可以先修改部分代码再运行
在这个例子中给他加上了一个属性
复制内容到剪贴板
代码:
table{padding:50px;}
ie下没有变化,ff下符合要求的变化了;

 提示:您可以先修改部分代码再运行
在这个例子中给他加上了一个属性
复制内容到剪贴板
代码:
table{margin:50px;}
ie下变化了,FF下也按要求变化了。
但在ie的效果中,没有办法显示父元素的背景颜色。

现在的问题是:在ie下table是如何解释padding,和margin这两个元素的呢??






padding:
IE不支持padding

margin:
table 的上下 magin 和 div 的 magin 重叠了,以至于伸出 div 的 margin 之外。
具体参考 CSS 规范中关于 margin collapsing 的部分,或者用这个关键字google一下也应该能找到很多相关内容。
按照规范而言,table 以及很多其他的 box 是不应该出现 margin collapsing 的,但 IE 的 border collapsing 是按照自己的一套规则处理的,这里就体现在它对 table 依然作了处理。
解决方法是给外围的 div 添加 layout,添加 layout 的方法有很多,比如赋予宽高,position:absolute,float,zoom等等。
关于 layout 的详细内容可以参考我最近翻译的一篇文章
http://old9.blogsome.com 已被 GFW 封锁