为什么Firefox不显示表格单元格边界 - 右侧还是左侧？

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

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; 
}

来源

2012-06-28 John Anderson

如果我能看到改变背景颜色的代码，我的回答能力会大大提高。另外，border-collaps：collapse;应该是“崩溃”。另外，为什么你有所有的Z指数的东西？ – dezman

感谢您的回复。我修正了上面的代码，并添加了背景颜色的CSS。 Z-index的东西出于各种原因，但我改变它做不同的值，删除它等，只是为了看看它是否有效果。它没有。 –

您可以设置rules="none"，其中明确关闭列和行边界。

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

您想要使用border-collapse: separate或未设置rules="none"。有机会，你也不想要frame="box"。

来源

2012-06-29 01:45:11

感谢您对“规则”和“框架”的建议。我并不真的需要他们。但是，我仍然没有看到Firefox或Opera中的所有边框。我不想'border-collapse：单独的'，因为我不需要双重边框。 –

那么，如果你正在做倒塌的边框，并且想要1px的边框，那么你的问题就是理论上边框以单元格边界为中心，每个单元格的边界为0.5px。在实践中，大多数显示器不能做到这一点没有丑陋的抗锯齿，所以我敢打赌，UA是捕捉到像素网格的边界。但是，这可以将它放在相邻单元格的空间中......使用2px边框是否有帮助？ –

良好的洞察力。 td上的2px边框在Firefox上显示，但是与其他边框一样厚，所以它仍然不理想。另外，我不想要2px边框。有另一种方法可以解决这个问题吗？ –

这个代码是在Opera 12.0和Firefox中工作的。

.calendar { 
    margin:auto; 
    height:100%; 
    width:100%; 
    border-collapse:collapse; 
    border:1px solid #ccc;} 

.calendar tr {height:20%;} 

.calendar tr:nth-child(1) td { 
    border:1px solid #ccc; 
    height:20%;} 

.calendar td { 
    width:14%; 
    vertical-align: top;} 

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

.very_light_gray { 
    background-color:#F8F8F8;}

来源

2012-06-29 16:30:34 karlcow

为什么Firefox不显示表格单元格边界 - 右侧还是左侧？

回答

相关问题