Firefox 中未显示边框，表格上的边框折叠，位置:tbody 上的相对，或单元格上的背景颜色 [英] Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
问题描述
考虑以下 HTML:
<头><风格>TABLE.data TD.priceCell{背景颜色:#EEE；文本对齐:居中；颜色:#000；}div.datagrid 表格{边框折叠:折叠；}div.datagrid 表格 tbody{位置:相对；}</风格><身体><div id="contents" class="datagrid"><table class="data" id="tableHeader"><头><tr class="fixed-row"><th>产品</th><th class="HeaderBlueWeekDay">价格</th><th class="HeaderBlueWeekDay">折扣</th></tr></thead><tr style="font-style: italic;"><td>键盘</td><td class="priceCell">20</td><td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;"class="priceCell">2</td></tr></tbody></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 不显示边框的原因是什么?
解决方案 这在我看来像是 Firefox 的错误.背景正在绘制边界；如果您使用半透明的背景颜色，您可以看到它.
我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=688556
Consider the following 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>
Notice that the last cell has a left and a right border in its inline style. You (or at least I) would expect this to be visible. In IE, this is the case. But in Firefox (6), this is not. You can solve this by:
- Removing position relative on
div.datagrid table tbody in the CSS
- Changing
div.datagrid table tbody to div.datagrid table in the CSS
- Removing the
background-color on table.data td.priceCell in the CSS
- Removing the
border-collapse on div.datagrid table in the CSS
This is a simplified version of our code; we also solved it (by choosing option 2). But what I'm wondering about is:
- Is this a bug in Firefox?
- Is this a bug in IE?
And especially: what is the reason Firefox wouldn't show the borders when the CSS is as it is?
解决方案 This looks like a Firefox bug to me. The backgrounds are painting over the borders; you can see it if you use a translucent background color.
I filed https://bugzilla.mozilla.org/show_bug.cgi?id=688556
这篇关于Firefox 中未显示边框，表格上的边框折叠，位置:tbody 上的相对，或单元格上的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆