Question

我在Windows 8.1上使用Firefox 26.0。简单的表格html + css布局在不同的缩放级别上呈现奇怪的效果。

Firefox的100％放大是可以的。 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

Answer 1

来自Bugzilla：

错误410959 - [BC]表格单元格边框宽度渲染不正确各种缩放级别

那是bug，还没有人解决它。

此外，如果您有表格数据，请使用table而不是div

解决方法是使用border-collapse: separate;

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

~~Demo~~ （关于使用border-collapse: collapse;进行放大和缩小的错误演示）

Demo

在Firefox中奇怪的表格渲染

1 个答案: