Question

以下HTML使用最新的Firefox错误地渲染。 IE和Chrome都可以，但Firefox在表格单元格内显示白色垂直线。

使用Firefox 21呈现的示例可在此处找到：

Firefox

这是Firefox中的错误还是我错过了什么？

HTML：

<table>
    <tbody>
        <tr>
            <td>
                <div></div>
            </td>
        </tr>
    </tbody>
</table>

CSS：

table{
    border: 2px solid red;
    border-collapse: collapse;
}

td{
    border: 2px solid red;
    padding: 0px;
}

div{
    background:blue;
    height: 100px;
    width: 100px;
}

删除border-collapse: collapse;会删除垂直白线。但我真的想要折叠桌子边框。

JSfiddle：http://jsfiddle.net/FeuBx/

更新：问题仅出现在100％浏览器缩放级别（Ctrl + 0）。

Answer 1

如果您在页面顶部设置HTML5 DOCTYPE，则代码将按原样运行：

<!DOCTYPE html>

<html>

<head>
<title>Test</title>
<style type="text/css">
table{
    border: 2px solid red;
    border-collapse: collapse;
}

td{
    border: 2px solid red;
    padding: 0px;
}

div{
    background:blue;
    height: 100px;
    width: 100px;
}
</style>
</head>

<body>

<table>
    <tbody>
        <tr>
            <td>
                <div></div>
            </td>
        </tr>
    </tbody>
</table>

</body>

</html>

Firefox中具有边框折叠的表格渲染问题：折叠

1 个答案: