Weird Tabelle Rendering in Firefox

Ich benutze Firefox 26.0 unter Windows 8.1. Das einfache tabellarische html + css-Layout wird seltsamerweise auf verschiedenen Zoomstufen dargestellt.Weird Tabelle Rendering in Firefox

100% Zoom in Firefox ist in Ordnung. IE und Chrome rendern das Dokument ordnungsgemäß. Das Ändern von HTML-Code in reguläre Tabelle/tr/td hilft nicht.

Ist es ein Fehler im Firefox unter Windows 8.1 oder etwas falsch mit dem Layout?

HTML-Code

<!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-Code

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

.row { 
    display: table-row; 
} 

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

Ergebnisse:

100% -2 Auszoomen:

100%-2

100% -3 Auszoomen:

100%-3

100% +1 Vergrößern:

100%+1

100% +3 Einzoomen:

100%+3

Quelle

2014-01-11 Vitaliy Shibaev

Von Bugzilla:

Bug 410959 - [BC] Tabelle Zellrahmenbreiten machen falsch bei verschiedenen Zoomstufen

dass ein bug ist und niemand hat es noch nicht gelöst.

Auch, wenn Sie eine tabellarische Daten haben, verwenden table und nicht div

und die Lösung hierfür ist border-collapse: separate;

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

~~Demo~~zu verwenden (Ihre Buggy-Demo beim Ein- und Auszoomen mit border-collapse: collapse;)

Demo

Quelle

2014-01-11 09:35:04

Vielen Dank für die schnelle und umfassende Antwort! –

Weird Tabelle Rendering in Firefox

Antwort

Verwandte Themen