表格设置 table-layout: fixed 以及 border 或 padding 后在 webkit 浏览器下的宽度问题

对表格设置 table-layout: fixed 后,可以方便的定义每个单元格的宽度,这个在论坛中用的非常多,不过今天在做新东西时偶然发现了 webkit 浏览器的一个 BUG,就是当表格具有 table-layout: fixed 属性并且给单元格设置了 border-width 或者左或右 padding 时,其宽度计算会有问题,其会将 border 宽度、padding 宽度都包含在 width 内。

举例说明就是,比如给一个 table 定义了 table-layout: fixed,然后定义单元格 width: 100px; padding: 10px; border-width: 5px; 那么期望的表格实际宽度应该是 100 + 10×2 + 5×2 = 130px,但是在 webkit 浏览器下实际还是 100px,可用宽度就只有 70px 了,这样就可能会导致单元格内的内容乱掉。

本想找个针对 webkit 的 CSS hack,结果发现基本都是利用 Chrome、Safari 等支持但其他浏览器不支持的 CSS3 选择器来做的,这样做的结果就是,将来某天其他浏览器如果也支持了类似选择器,那么这个问题就会重现,就像一个定时炸弹(如果你给一个软件常年提供技术支持,你就会深有体会,绝对不能这么做)。

所以最好还是从写法上避免这个 BUG,尽可能不给单元格定义比较宽的边框,不给单元格定义左右内边距,而是给单元格内的元素定义边距。