html – Webkit浏览器在table-layout中确定单元格宽度时不考虑填
发布时间：2020-12-14 21:49:06 所属栏目：资源 来源：网络整理
导读：当应用表格布局时，我得到不同的结果：固定到表格上，并在单元格上使用填充。 IE和Firefox似乎通过将单元格宽度和填充添加在一起正常工作。 Chrome和Safari只能使用单元格宽度。我看到有一个错误的问题，但找不到任何工作。有人知道如何解决吗？ WebKit Bugz
|
当应用表格布局时，我得到不同的结果：固定到表格上，并在单元格上使用填充。 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> </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屏幕和(-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来识别浏览器并动态修复问题。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |