【分享】你知道吗？——表格的盒子模型问题

WebAdvocate 2010-07-13 01:06:58

加精

真理和谬论，只有一步之遥。
认识一个问题，不够深入，就可能是错的。

在【分享】重新认识IE盒模型bug 中，曾经说到了 ‘width’ 和 ‘height’ 特性的作用位置问题，在其中，TABLE 元素比较特殊。
幸亏我上次的用词是 TABLE 元素，而不是 TABLE，用词还够准确，否则，真的就成谬论了。
这几天，做个东西，把一个 DIV 搞成一个 TABLE，好让 DIV拥有TABLE的布局优点。哪知道，偷鸡不成反蚀一把米……

我把出问题的部分，精简了一下，代码如下：

<div style="display:table; width:150px; padding:25px; border:25px solid green; background:gold;">

   <span style="background:silver">XXXXX</span>

</div>

本想，DIV 加上 “display:table”，就能让 DIV 获取表格布局的优势。但是，我忘了一件事了，那就是 TABLE 元素中 ‘width’ 和 ‘height’ 的作用位置。这下问题来了，在各浏览器里，这段代码存在较大的差异。
在Firefox、Opera和IE的标准模式下，是这个样子滴：

而在Chrome和Safari，以及IE的兼容模式下，却是这个样子滴：

把 “display:table” 改成 “display:inline-table”，效果相同。

可见，对于 "display:table" 或 "display:inline-table;" 的元素，宽度高度作用位置在各浏览器中不同。
在 Safari、Chrome 和 IE 兼容模式下，作用于 border box，这与 table 标签相同。
在 Firefox、Opera 和 IE 标准模式下，作用于 content box。
注意，IE 在兼容模式下，并不支持 “display:table” 和 “display:inline-table;”，IE在兼容模式下，存在盒模型 bug（见【分享】重新认识IE盒模型bug ），所以，宽度和高度特性一直作用于 border box。所以，与 Safari 和 Chrome 浏览器中现象虽然相同，但是，根本原因是不同的。

最后，我不得不放弃这种想法，还是老老实实的用了 DIV。

相关的帖子是：
【分享】说说标准 ---- 你真的了解盒子模型(box model)吗？
【分享】重新认识IE盒模型bug

更多兼容性问题在这里：【分享】浏览器兼容性问题目录

...全文