在表格布局中確定單元格寬度時，Webkit瀏覽器不考慮填充：已修復

Question

在應用table-layout:fixed時，我得到了不同的結果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>

Answer 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來標識瀏覽器並動態修復問題。

Answer 2

如果你在涉及填充時如何計算寬度有差異，為什么不從td刪除填充？

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

Answer 3

如果使用<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>

Answer 4

設置框的位置類型（絕對/相對等）以獲得相同的結果，您需要從那里調整框。