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给某单元格添加边界线。