火狐浏览器中表格呈现异常

Question

火狐浏览器中表格呈现异常

htmlcssfirefoxhtml-tablewindows-8.1

5

我使用的是Windows 8.1上的Firefox 26.0。简单的表格html+css布局在不同的缩放级别下渲染得很怪异。

在Firefox中，100%缩放是正常的。IE和Chrome可以正确地呈现文档。将HTML代码更改为常规的table/tr/td并不能解决问题。

这是Firefox在Windows 8.1上的一个bug还是布局有问题？

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

- Vitaliy Shibaev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mr. Alien · Accepted Answer

来自Bugzilla:

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

这是一个错误，目前还没有人解决它。

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

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

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

演示 (您的有缺陷的演示，使用 border-collapse: collapse; 进行缩放操作)

演示