考虑下面的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表tbody的相对位置
>将div.datagrid表tbody更改为CSS中的div.datagrid表
>删除CSS中的table.data td.priceCell上的背景颜色
>删除CSS中div.datagrid表上的border-collapse
这是我们的代码的简化版本;我们也解决了(通过选择选项2)。但我想知道的是：
特别是：当CSS是原样时，Firefox不显示边框的原因是什么？
解决方法
这看起来像一个Firefox bug。背景是在边界上画;你可以看到它，如果你使用半透明的背景颜色。
