表格布局:Safari中固定的渲染差异

Question

基本上我遇到的问题是在Safari/Chrome中它改变了我的列的宽度,即使我已经指定了a)表格上的宽度,b)表格布局:固定,以及c)我的第一行上的特定宽度添加填充和边框值时,添加到指定表的宽度.在IE7和Firefox 3中,表格呈现相同.但是在Safari/Chrome中,它决定通过从其他列中获取空间来扩大第二列.

有任何想法吗？我有一个非常简单的示例页面,您可以查看该图像,以及显示如何在所有三个浏览器中呈现表格以进行比较的图像.

Answer 1

在有缺陷的webkits中,table-layout: fixed还提供了您的表格单元格box-sizing: border-box.浏览器检测的一种替代方法是明确设置box-sizing: border-box为在浏览器之间获得一致的行为,然后相应地调整宽度和高度(必须增加宽度和高度以包括填充和边框).

#my-table td {
  box-sizing: border-box;
} 

Answer 2

环顾四周后，我认为这是由以下 webkit bug 引起的：13339和18565。基本上是如何使用边框和填充值来计算列的最终宽度的问题。

我最终做了一些浏览器嗅探，并根据 webkit 浏览器设置了一些不同的 css 值，以便最终渲染与 FF 和 IE 相同。