火狐CSS表外边框线

我遇到了在Firefox中，当CSS边界崩溃瓦解一个表格边框线的CSS问题，并有2个合并单元格，其中一人有一个像素边框。右边存在额外的不需要的边界线。其他浏览器中不存在此问题，IE和Chrome不存在此问题。火狐CSS表外边框线

的FireFox版本是

的Mozilla/5.0（视窗; U; Windows NT的 5.1; ZH-CN; RV：1.9.2.8）壁虎/ 20100722火狐/ 3.6.8（.NET CLR 3.5。 30729）

我的测试文档类型是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

。

alt text

<table cellspacing="0" cellpadding="0" style="position: absolute; width: 217px; left: 0px;border-collapse:collapse"> 
<colgroup><col col="0" style="width: 72px;"><col col="1" style="width: 72px;"><col col="2" style="width: 72px;"> 
</colgroup> 
<tbody> 
<tr tridx="0" style="height: 19px;"> 
<td rowspan="2" colspan="2" style="border: 1px solid #000000"></td><td row="0" col="2"></td> 
</tr> 
<tr tridx="1" style="height: 19px;"><td row="1" col="2"></td></tr> 
<tr tridx="2" style="height: 19px;"><td row="2" col="0"></td><td row="2" col="1"></td><td row="2" col="2"></td></tr> 
<tr tridx="3" style="height: 19px;"><td rowspan="3" colspan="2" style="border: 1px solid #000000"></td><td></td></tr> 
<tr tridx="4" style="height: 19px;"><td ></td></tr> 
<tr tridx="5" style="height: 19px;"><td></td></tr> 
</tbody> 
</table>

来源

2010-10-08 Fisher

什么的doctype您使用？ – 2010-10-08 03:30:33

我测试过的doctype是：<！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.0 Transitional // EN”>，由editplus自动生成。 – Fisher 2010-10-08 04:32:21

我不知道是否有它一个更好的修复，但问题在于colspan和使用border-collapse。

我重新写的代码只是因为它看起来凌乱我，但基本上解决方案是使用border-spacing: 0;，而不是border-collapse: collapse;

，因为他们是不一样的东西这是不完美的。所以如果你所有的单元格都有边框，那么表格内的单元格就会增加一倍，从而创建一个2px边框。

然而，在这种情况下你不会注意到任何东西，你可以使用border-collapse反正。

嗯，我想我已经说得够多了。

这里是我的代码（从你的稍有不同，但它做同样的事情）：

CSS：

<style type="text/css"> 
.tableStyle { 
position: absolute; 
left: 0px; 
border-spacing: 0; 
} 
.tableStyle td { 
height: 19px; 
width: 72px; 
} 
.blackBorder { 
border: 1px solid #000; 
} 
</style>

HTML：

<table class="tableStyle"> 
<tr> 
    <td rowspan="2" colspan="2" class="blackBorder">1</td> 
    <td>2</td> 
</tr> 
<tr> 
    <td>3</td> 
</tr> 
<tr> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
</tr> 
<tr> 
    <td rowspan="3" colspan="2" class="blackBorder">7</td> 
    <td>8</td> 
</tr> 
<tr> 
    <td>9</td> 
</tr> 
<tr> 
    <td>10</td> 
</tr> 
</table>

来源

2010-10-08 09:24:22

谢谢你的明确解释和良好的建议。事实上，并非我所有的细胞都有边界，但其中一些细胞依赖于它。如果我使用“border-collapse：collapse”，表格会双倍地创建2px边框，否则其他没有边框的单元格会有额外的不需要的边框。 – Fisher 2010-10-11 01:39:19

火狐CSS表外边框线

回答

相关问题