考虑以下 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) 中，情况并非如此。您可以通过以下方式解决这个问题：
- 删除相对位置
div.datagrid table tbody在CSS中
- 改变
div.datagrid table tbody to div.datagrid table在CSS中
- 删除
background-color on table.data td.priceCell在CSS中
- 删除
border-collapse on div.datagrid table在CSS中
这是我们代码的简化版本；我们也解决了这个问题（通过选择选项2）。但我想知道的是：
- 这是 Firefox 中的一个错误吗？
- 这是 IE 的错误吗？
特别是：当 CSS 保持原样时，Firefox 不显示边框的原因是什么？
刚刚遇到这个问题并找到了一个仅 css 的解决方案：
只需添加background-clip: padding-box给你的td元素。
请参阅这篇文章了解更多信息：https://developer.mozilla.org/en-US/docs/CSS/background-clip
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
