Menu
I use Firefox 26.0 on Windows 8.1. The simple tabular html+css layout is rendered strangely on different zoom levels.
100% zoom in Firefox is ok. IE and Chrome render the document properly. Changing html code to regular table/tr/td doesn't help.
Is it a bug in the Firefox on Windows 8.1 or something wrong with the 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;
}
Results:
100% -2 zoom out:
100% -3 zoom out:
100% +1 zoom in:
100% +3 zoom in:
232
From Bugzilla :
Bug 410959 - [BC] Table cell border widths render incorrectly at various zoom levels
That's a bug and no one has yet solved it.
Also, if you are having a tabular data, use table and not div
And the solution for this is to use border-collapse: separate;
#board {
display: table;
border-collapse: separate;
}
Demo (Your buggy demo on zoom in and out using border-collapse: collapse;)
Demo
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
