考虑以下 HTML:
<html>
<head>
<style>
TABLE.data TD.priceCell
{
background-color: #EEE;
text-align: center;
color: #000;
}
div.datagrid table
{
border-collapse: collapse;
}
div.datagrid table tbody
{
position: relative;
}
</style>
</head>
<body>
<div id="contents" class="datagrid">
<table class="data" id="tableHeader">
<thead>
<tr class="fixed-row">
<th>Product</th>
<th class="HeaderBlueWeekDay">Price</th>
<th class="HeaderBlueWeekDay">Discount</th>
</tr>
</thead>
<tbody>
<tr style="font-style: italic;">
<td>Keyboard</td>
<td class="priceCell">20</td>
<td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
请注意,最后一个单元格的内联样式有左右边框。你(或者至少我)会希望这是可见的。在IE中,是这样的。但在 Firefox (6) 中,情况并非如此。您可以通过以下方式解决此问题:
- 在 CSS 中删除
div.datagrid table tbody
上的相对位置 - 在 CSS 中将
div.datagrid table tbody
更改为div.datagrid table
- 在 CSS 中删除
table.data td.priceCell
上的background-color
- 在 CSS 中移除
div.datagrid table
上的border-collapse
这是我们代码的简化版本;我们也解决了它(通过选择选项 2)。但我想知道的是:
- 这是 Firefox 中的错误吗?
- 这是 IE 中的错误吗?
特别是:当 CSS 保持原样时,Firefox 不显示边框的原因是什么?
最佳答案
刚遇到这个问题,找到了一个纯CSS的解决方案:
只需将 background-clip: padding-box
添加到您的 td
元素即可。
有关详细信息,请参阅本文:https://developer.mozilla.org/en-US/docs/CSS/background-clip
关于css - 边框在 Firefox 中未显示,表上有边框折叠,位置为 : relative on tbody, 或单元格上有背景色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7517127/