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

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

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

来源

2010-05-31 patmortech

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

我最终做了一些浏览器嗅探并设置了一些基于Webkit浏览器的不同的CSS值，以便最终的渲染与FF和IE相同。

来源

2010-06-08 07:11:08 patmortech

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

来源

2010-06-01 01:01:39

我刚试过，它对问题没有任何影响。 – patmortech 2010-06-01 02:04:23

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

来源

2012-02-08 22:14:43

在越野车webkit，table-layout: fixed也给你的表格单元格box-sizing: border-box。浏览器检测的一种替代方法是明确设置box-sizing: border-box以在浏览器中获得一致的行为，然后相应地调整宽度和高度（宽度和高度必须增加以包含填充和边框）。

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

来源

2013-01-19 23:18:20 Muir

我做了一个剑道网格有表：固定宽度。所有列消失，但只在Safari中。经过检查，td元素的计算样式宽度均为-3px。如果我删除表：固定宽度，这很好。如果我指定自定义像素宽度（但不是百分比），那很好。如果我禁用从每个CSS源应用的每个样式（可以在控制台样式选项卡中找到），则问题不是固定的，没有设置宽度-3px。

所以我必须设置所有的列像素宽度，否则不使用表：固定宽度。

来源

2013-07-24 17:17:45

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

回答

相关问题