css - 为什么 Firefox 不显示表格单元格的 border-right 或 border-left？

Question

我有一个为所有表格单元格设置边框的表格。这用于日历。当前日期的表格单元格包含一个更改该表格单元格背景颜色的 div。但是，在 Firefox 中查看时，它会覆盖(或掩盖 - 我不确定)右侧和底部表格单元格边框。它会覆盖 Opera 中的顶部和左侧表格单元格边框。它在 Chrome 和 Safari 中运行良好。它没有在 IE 中测试过。如何让所有边框在 Firefox 和 Opera 中显示？这是代码:

HTML:

<table class="calendar" frame="box" rules="none">
    <tr>
        <td></td>...//seven td's total
    </tr>
    <tr><td class="very_light_gray"><div class="calendar_day_wrap">Today</div></td>...</tr>
    .... // 5 or 6 table rows total
</table>

CSS:

.calendar {
    position:inherit;
    margin:auto;
    height:100%;
    width:100%;
    z-index:99999;
    border-collapse:collapse;
}

.calendar tr {
    height:20%;
    position:relative;
    z-index:2;
}

.calendar td {
    border:1px solid #ccc !important;
    width:14%;
    vertical-align: top;
    position:relative;
    z-index:2;
}

.calendar_day_wrap {
    position:relative;    
    width:100%;
    height:100%;
}

.very_light_gray {
    background-color:#F8F8F8 !important;
}

Answer 1

您设置了 rules="none"，它明确关闭了列和行的边框。

然后设置 border-collapse:collapse，它会折叠带有列/行边框的单元格边框。对于每个边界段，都有一个边界声明优先的列表，并且“明确关闭”具有每个规范的最高优先级。

您想使用 border-collapse: separate 或不设置 rules="none"。很有可能，您也不想要 frame="box"。