帶有border-collapse的Firefox中的表格呈現問題：摺疊

以下HTML與最新的Firefox呈現不正確。 IE和Chrome都可以，但Firefox在表格單元格內顯示白色垂直線。與Firefox 21渲染帶有border-collapse的Firefox中的表格呈現問題：摺疊

例子可以在這裏找到：

Firefox

這是在Firefox中的錯誤還是我失去了一些東西？

HTML：

<table> 
    <tbody> 
     <tr> 
      <td> 
       <div></div> 
      </td> 
     </tr> 
    </tbody> 
</table>

CSS：

table{ 
    border: 2px solid red; 
    border-collapse: collapse; 
} 

td{ 
    border: 2px solid red; 
    padding: 0px; 
} 

div{ 
    background:blue; 
    height: 100px; 
    width: 100px; 
}

刪除border-collapse: collapse;去掉垂直白線。但我真的想要摺疊表格邊框。

的jsfiddle：http://jsfiddle.net/FeuBx/

更新：只出現100％的瀏覽器的縮放級別（按Ctrl + 0）的問題。

來源

2013-06-12 DYA

我似乎無法複製的Chrome或Firefox（21.0）這個問題。 – Ford

可能值得指定。上面的JSfiddle對我產生了以下錯誤：Firefox 20.0.1 Win32和Firefox 21.0 Win32，具有100％的瀏覽器縮放級別。 – DYA

瀏覽器窗口大小，屏幕上的div位置和瀏覽器縮放 - 所有這些都很重要。我已經報告了FF錯誤（Bug 883654）。 – DYA

你的代碼工作是，如果你設置你的頁面頂部的HTML5 DOCTYPE爲：

<!DOCTYPE html> 

<html> 

<head> 
<title>Test</title> 
<style type="text/css"> 
table{ 
    border: 2px solid red; 
    border-collapse: collapse; 
} 

td{ 
    border: 2px solid red; 
    padding: 0px; 
} 

div{ 
    background:blue; 
    height: 100px; 
    width: 100px; 
} 
</style> 
</head> 

<body> 

<table> 
    <tbody> 
     <tr> 
      <td> 
       <div></div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

</body> 

</html>

來源

2013-06-13 17:07:12

感謝您的建議。我遇到這個問題的頁面已經有了HTML5的文檔類型。上面的JSfiddle也有html 5文檔類型集。這個問題似乎非常不穩定。它實際上取決於瀏覽器縮放級別。只有100％可見，如果將其改變爲任何方向，它都會消失。 – DYA

奇怪的是，如果您將我寫入的代碼放入一個html文件並將其加載到firefox 21中，它對我來說看起來是正確的，但出於某種原因，即使它具有html5文檔類型，它仍然無法正常工作。另外，如果我刪除html5文檔類型，它會顯示不正確 - 它在小提琴中顯示的方式。 –

如果您調整小提琴上iframe的寬度，邊框將消失，並且呈現正確。我想知道是否有一個問題，JavaScript調整了導致問題的小提琴中的iframe。 –

帶有border-collapse的Firefox中的表格呈現問題：摺疊

回答

相關問題