Html 表布局：修复了Safari中的渲染差异

基本上，我遇到的问题是，在Safari/Chrome中，它改变了我的列的宽度，尽管我已经指定了a）表的宽度，b）表的布局：固定的，以及c）我的第一行的特定宽度，当添加填充和边框值时，这些宽度加起来等于指定的表的宽度。在IE7和Firefox3中，表的呈现方式相同。但在Safari/Chrome中，它决定通过占用其他列的空间来增大第二列

---

有什么想法吗？我有一个可以让您查看的示例，以及在所有三种浏览器中如何呈现表格以进行比较。

您是否尝试过加载一些重置CSS？

---

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

---

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

我能够通过移除固定宽度的

中的填充来绕过这个问题。然后，您可以安全地将填充添加到buggy webkits中的

，

表格布局：修复了
还提供了表格单元格
框大小：边框框
。浏览器检测的一种替代方法是显式设置
框大小：边框框
，以在浏览器之间获得一致的行为，然后相应地调整宽度和高度（宽度和高度必须增加以包括填充和边框）

我做了一个剑道网格有表：固定宽度。所有的柱子都消失了，但只在狩猎中消失了。检查后，td元素的计算样式宽度均为-3px。如果我移除桌子：固定宽度，就可以了。如果我指定自定义像素宽度（但不是百分比），就可以了。如果我禁用了从我能找到的每个css源（在控制台样式选项卡中）应用的每个样式，那么问题并没有解决，也没有设置宽度-3px

所以我要么设置所有列像素宽度，要么不使用table:fixed width

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