我在申请时得到不同的结果table-layout:fixed到表格并在单元格上使用填充。 IE 和 Firefox 似乎可以通过将单元格宽度和填充加在一起来正常工作。 Chrome 和 Safari 仅使用单元格宽度。我看到该问题存在一个错误，但找不到任何解决方法。有谁知道如何解决它？
WebKit Bugzilla：https://bugs.webkit.org/show_bug.cgi?id=13339 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> </td>
<td class="set-width"><div class="box"></div></td>
</tr>
<tr>
<td> </td>
<td>unbroken</td>
</tr>
</table>
<h2>Table-Layout: Fixed</h2>
<table border="1" cellspacing="0" cellpadding="0" id="table-2">
<tr>
<td> </td>
<td class="set-width"><div class="box"></div></td>
</tr>
<tr>
<td> </td>
<td>unbroken</td>
</tr>
</table>
我能想到的方法有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 来识别浏览器并动态修复问题。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
