火狐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表外邊框線

回答

相關問題