Webkit 浏览器在确定表格布局中的单元格宽度时不考虑填充：已修复答案

【问题标题】：Webkit browsers not accounting for padding when determining cell width in table-layout:fixedWebkit 浏览器在确定表格布局中的单元格宽度时不考虑填充：已修复
【发布时间】：2011-05-25 10:31:30
【问题描述】：

将table-layout:fixed 应用于表格并在单元格上使用填充时，我得到了不同的结果。通过将单元格宽度和内边距相加，IE 和 Firefox 似乎可以正常工作。 Chrome 和 Safari 仅使用单元格宽度。我看到这个问题有一个错误，但找不到任何解决方法。有谁知道如何绕过它？

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>

【问题讨论】：

关于这些解决方案如何提供帮助的任何更新？
我遇到了同样的事情。我们经常使用固定宽度的表格，它很好地在样式表中强制填充，因此您可以将文本转储到单元格中。自 2007 年以来一直存在于错误跟踪器中，这有点令人遗憾，而且它显然不符合规范。

标签： html css html-table webkit

【解决方案1】：

我能想到的方法有3种。

最简单的方法是添加仅由 Chrome 和 Safari 解释的样式表块，以调整行为以考虑呈现问题。避免使用“@media screen and (-webkit-min-device-pixel-ratio:0)”，因为这会影响 Opera 和某些版本的 FF。使用“body:first-of-type”：

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 来识别浏览器并动态修复问题。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

设置框的位置类型（绝对/相对等）以获得相同的结果，您需要从那里调整框。

【讨论】：

【解决方案4】：

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

.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>

【讨论】：