Firefox 中奇怪的表格渲染
Posted
技术标签:
【中文标题】Firefox 中奇怪的表格渲染【英文标题】：Weird table rendering in Firefox 【发布时间】：2014-01-30 09:25:27 【问题描述】：我在 Windows 8.1 上使用 Firefox 26.0。简单的表格 html+css 布局在不同的缩放级别上呈现出奇怪的效果。
在 Firefox 中 100% 放大是可以的。 IE 和 Chrome 正确呈现文档。将 html 代码更改为常规 table/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% -3 缩小：
100% +1 放大：
100% +3 放大：
【问题讨论】：
【参考方案1】：来自 Bugzilla：
错误 410959 - [BC] 表格单元格边框宽度在 各种缩放级别
那是bug，还没有人解决。
另外，如果您有表格数据，请使用 table 而不是 div
解决方案是使用border-collapse: separate;
#board
display: table;
border-collapse: separate;
Demo （您使用 border-collapse: collapse; 进行放大和缩小的错误演示）
Demo
【讨论】：
感谢您快速而全面的回答！以上是关于Firefox 中奇怪的表格渲染的主要内容，如果未能解决你的问题，请参考以下文章