表格违反 W3C 盒子模型，Ie8 忽略固定表格宽度！

Question

我很难处理表格​​和列宽。

更新：我正在使用 XHTML Strict 1.0。

页面为：http://www.pro-turk.net/try

我遇到的第一个问题是，我有一个固定宽度为 100px 和 4px 填充的列，但它违反了我的填充，具体取决于值。即使 padding 为 0 或 4，列宽（根据 W3C 框模型作为两个边框之间的距离）也是 156 像素。只有文本的位置会发生变化。

根据 W3C 盒子模型（可在 www.pro-turk.net/box_model.png 获得），边框和填充不包含在 WIDTH 属性中，那么为什么会出现错误的渲染？

第二个问题是，当您查看我使用 IE8 提供的页面时，第二行中的第一个单元格具有 150px 的固定宽度，但无论我说什么，它都显示了大约 50% 的总表格宽度。

Answer 1

您正在使用默认的auto table-layout mode。这让浏览器可以相当随意地决定为每列分配多少空间，通常取决于单元格中实际内容的数量。在这种模式下，width 只不过是建议而已。

如果您希望浏览器认真对待您的列宽，您应该在<table> 元素上设置table-layout: fixed，并包含具有明确宽度的<col/> 元素，或者在第一行的单元格上设置宽度，例如您想要固定宽度的列。 （其他列将平均共享剩余宽度。）fixed 表格布局还允许浏览器更快地呈现。

对于您的页面，使用 CSS 定位可能会更好。当然对于似乎只存在于浮动图像的内部表。应避免嵌套表。