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

Question

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

有什么想法吗？我有一个very simple sample page你可以查看，以及an image显示如何在所有三个浏览器中呈现表格进行比较。

Answer 1

在有缺陷的webkits中，table-layout: fixed也会为您的表格单元格box-sizing: border-box提供。浏览器检测的一种替代方法是显式设置box-sizing: border-box以获得跨浏览器的一致行为，然后相应地调整宽度和高度（必须增加宽度和高度以包括填充和边框）。

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

Answer 2

我能够通过使用固定宽度从<th>中删除填充来解决此问题。然后，您可以安全地将填充添加到<td>

Answer 3

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

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

Answer 4

您是否尝试过加载一些重置CSS？ http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 5

我做了一个Kendo网格有表：固定宽度。所有列都消失了，但仅限于Safari。检查时，td元素的计算样式宽度均为-3px。如果我删除table：fixed-width，那很好。如果我指定自定义像素宽度（但不是百分比），那很好。如果我禁用从我可以找到的每个css源应用的每个样式（在控制台样式选项卡中），问题不会修复它，并且没有任何设置宽度为-3px。

所以我必须设置所有列像素宽度，否则不要使用table：fixed-width。