Firefox 2.0 bug: border-collapse 属性与 border 属性的冲突

当没有设置表格的border、cellpadding和cellspacing属性时,不同浏览器通常会给这三个属性附以初始值。为次,通常需要给表格标签设置这三个属性的值。

<table border="0" cellpadding="0" cellspacing="0">

为了省去麻烦,并且让HTML更加简洁,我通常习惯在CSS文件中添加几条定义来将border、cellpading、cellspacing三个属性的初始值设为零。如果需要给某个单元格添加边界,再通过给单元格(td标签)设置属性来实现。


<style>
table{
border: none;
border-spacing: 0;
border-collapse: collapse;
}
td.withBorder{
border: 1px solid blue;
}
</style>

然而今天却在Firefox里发生了不可思忆的事情。

为实现一个效果,必须得使用JavaScript来给该添加风格。因此我使用getElementById(“nameOfCell”).className来给某单元格添加风格。但是所有风格都能实现,除了单元格的边界(border),同时在IE里能够正常该单元格的边界。


<style>
table{
border: none;
border-spacing: 0;
border-collapse: collapse;
}
td.withBlueBorder{
border: 1px solid blue;
background-color: yellow;
}
</style>


<table>
<tr>
<td id="nameOfCell">
</td>
</tr>
</table>


<script>
getElementById("nameOfCell").className = "withBlueBorder";
</script>

于是再做尝试,在HTML里直接给该单元格添加该CSS风格,却能在Firefox和IE里正常显示。由此可以基本上判定是Firefox的Bug了。


<td class="withBlueBorder">

再做了几次尝试后,最终发现是样式表里的border-collapse属性有关。把border-collapse属性注释掉后,通过JavaScript也可以给单元格加上边界线了。

所以,最后判定确实是Firefox的缺陷,当border-collapse设置为collapse时,Firefox无法通过JavaScript给某单元格添加边界线。

“Firefox 2.0 bug: border-collapse 属性与 border 属性的冲突”的2个回复

  1. 嘎嘎,番薯仔:
    我也想用wordpress架构空间,你能推荐一个比较好的空间么?最好是免费的,购买的也行。
    谢谢啦~~~

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注