在确定表格布局中的单元格宽度时，未考虑填充的Webkit浏览器：fixed

将table-layout:fixed应用于表格并在单元格上使用填充时，我得到了不同的结果。通过将单元格宽度和填充添加到一起，IE和Firefox似乎可以正常工作。 Chrome和Safari仅使用单元格宽度。我看到这个问题存在漏洞，但找不到任何解决方法。有谁知道如何解决它？在确定表格布局中的单元格宽度时，未考虑填充的Webkit浏览器：fixed

的WebKit的Bugzilla：https://bugs.webkit.org/show_bug.cgi?id=13339

table { 
width:200px; 
border-collapse:collapse; 
} 
#table-1 { 
table-layout:auto; 
} 
#table-2 { 
table-layout:fixed; 
} 
td { 
padding:5px 10px; 
} 
td.set-width { 
width:15px; 
} 
.box { 
width:15px; 
height:15px; 
background-color:red; 
} 

<h2>Table-Layout: Auto</h2> 
<table border="1" cellspacing="0" cellpadding="0" id="table-1"> 
<tr> 
<td>&nbsp;</td> 
<td class="set-width"><div class="box"></div></td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>unbroken</td> 
</tr> 
</table> 
<h2>Table-Layout: Fixed</h2> 
<table border="1" cellspacing="0" cellpadding="0" id="table-2"> 
<tr> 
<td>&nbsp;</td> 
<td class="set-width"><div class="box"></div></td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>unbroken</td> 
</tr> 
</table>

来源

2010-12-14 Ann

任何更新至于如何这些解决方案的帮助？ – 2010-12-28 17:38:50

我遇到了同样的事情。我们使用固定宽度的表格，并且很好地在样式表中强制填充，以便您可以将文本转储到单元格中。它有点令人伤心，这是自2007年以来一直在bug追踪器，它明显超出规格。 – 2011-01-05 18:49:39

有3种方法我能想到的。

最简单的做法是添加仅由Chrome和Safari解释的样式表块，该样式表块通过调整行为来考虑渲染问题。避免使用“@media屏幕和（-webkit-min-device-pixel-ratio：0）”，因为这会影响Opera和某些版本的FF。使用“身体：首个类型”：

body:first-of-type td { 
padding:5px 10px; 
}

你也可以有不同的样式：

<link rel="stylesheet" type="text/safari" href="webkit-styles.css" /> 
<link rel="stylesheet" type="text/chrome" href="webkit-styles.css" />

第三种选择是使用JavaScript。在脚本标签内，您可以使用navigator.appName和navigator.appVersion来识别浏览器并动态修复问题。

来源

2010-12-14 18:06:52

如果在涉及填充时计算宽度的方式有差异，为什么不从td中删除填充？

<table style="table-layout: fixed;"> 
<tr> 
    <td style="width: 100px;"> 
    <div style="padding: 10px;"> 
    lorem, ipsum. 
    </div> 
    </td> 
</tr> 
</table>

来源

2011-02-10 05:37:43

设置框的位置类型（绝对/相对等）来获得平等的结果，则需要从那里捏捏框。

来源

2011-02-17 03:35:24 Undefined

如果您使用<colgroup>标记并在<td>上指定<col> INSTEAD OF的宽度，则可以解决此错误。

.secondCol { 
    width: 15px; 
} 

<table border="1" cellspacing="0" cellpadding="0" id="table-2"> 
    <colgroup> 
    <col class="firstCol"> 
    <col class="secondCol"> 
    </colgroup> 
    <tr> 
    <td>&nbsp;</td> 
    <td><div class="box"></div></td> 
    </tr> 
</table>

来源

2011-04-23 00:07:22 Jason