Firefox中奇怪的表格渲染

我在Windows 8.1上使用Firefox 26.0。簡單的表格html + css佈局在不同的縮放級別上呈現奇怪。Firefox中奇怪的表格渲染

100％放大Firefox是好的。 IE和Chrome會正確顯示文檔。將html代碼更改爲常規表格/ tr/td並沒有幫助。

它是在Windows 8.1的Firefox的錯誤或佈局的錯誤？

HTML代碼

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <div id="board"> 
     <div class="row"> 
      <div class="cell"></div> 
      <div class="cell"></div> 
      <div class="cell"></div> 
      <div class="cell"></div> 
      <div class="cell"></div> 
     </div> 
    </div> 
</body> 
</html>

CSS代碼

#board { 
    display: table; 
    border-collapse: collapse; 
} 

.row { 
    display: table-row; 
} 

.cell { 
    border: 1px solid; 
    display: table-cell; 
    height: 1em; 
    width: 1em; 
}

結果：

100％-2縮小：

100%-2

100％-3縮小：

100%-3

100％1放大：

100%+1

100％3放大：

100%+3

來源

2014-01-11 Vitaliy Shibaev

從Bugzilla的：

的Bug 410959 - [BC表單元格邊框寬度在各種縮放級別

這是一個bug渲染不正確，沒有人尚未解決它。

此外，如果你有一個表格數據，使用table，而不是div

而對於這個解決方案是使用border-collapse: separate;

#board { 
    display: table; 
    border-collapse: separate; 
}

~~Demo~~（使用進行放大和縮小的小車示範）

Demo

來源

2014-01-11 09:35:04

感謝您快速和全面的回答！ –

Firefox中奇怪的表格渲染

回答

相關問題