Pet*_*ter 74 css firefox border
请考虑以下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到div.datagrid table在CSSbackground-colorontable.data td.priceCellborder-collapseondiv.datagrid table这是我们代码的简化版本; 我们也解决了它(通过选择选项2).但我想知道的是:
尤其是:当CSS原样时,Firefox不会显示边框的原因是什么？
med*_*ngs 162
刚刚遇到这个问题,并找到了一个只有css的解决方案:只需添加background-clip: padding-box到您的td元素.
有关更多信息,请参阅此文章:https://developer.mozilla.org/en-US/docs/CSS/background-clip
Bor*_*sky 58
对我来说这看起来像是一个Firefox错误.背景是在边界上绘画; 如果你使用半透明的背景颜色,你可以看到它.
我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=688556
小智 12
只是把所有在一个地方.
当你在一个带有折叠边框的表中有一个位置相对的单元格时会产生问题(正如Boris指出并填写了错误https://bugzilla.mozilla.org/show_bug.cgi?id=688556)
这可以使用CSS轻松解决,如user2342963所示(将背景剪辑:填充框添加到单元格).
您可以在这里看到问题(使用Firefox)和修复:http://jsfiddle.net/ramiro_conductiva/XgeAS/
table {border-spacing: 0px;}
td {border: 1px solid blue; background-color: yellow; padding: 5px;}
td.cellRelative {position: relative;}
td.cellRelativeFix {background-clip: padding-box;}
table.tableSeparate {border-collapse: separate;}
table.tableCollapse {border-collapse: collapse;}
<table class="tableSeparate">
<tbody>
<tr>
<td class="cellRelative">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
<table class="tableCollapse">
<tbody>
<tr>
<td class="cellRelative">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
<table class="tableCollapse">
<tbody>
<tr>
<td class="cellRelative cellRelativeFix">position: relative</td>
<td>position: static</td>
</tr>
</tbody>
</table>
这是firefox中的一个错误,希望他们能尽快解决.但同时我通过设置我的td细胞来解决这个问题position: static.希望这将有助于其他人.
td {
position: static;
}