Firefox 中带有边框折叠的表格呈现问题：折叠答案

【问题标题】：Table rendering issue in Firefox with border-collapse:collapseFirefox 中带有边框折叠的表格呈现问题：折叠
【发布时间】：2013-06-09 06:09:54
【问题描述】：

最新的 Firefox 无法正确呈现以下 HTML。 IE 和 Chrome 都可以，但是 Firefox 在表格单元格内显示白色竖线。

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

http://tinypic.com/r/2w2qvb6/5

这是 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) 时出现。

【问题讨论】：

我似乎无法在 Chrome 或 Firefox (21.0) 上复制此问题。
可能值得指定。上面的 JSfiddle 对我产生错误：Firefox 20.0.1 Win32 和 Firefox 21.0 Win32 with 100% browser zoom level。
浏览器窗口大小、屏幕上的 div 位置和浏览器缩放 - 所有这些都很重要。我已经为此报告了 FF 错误（错误 883654）。

标签： html firefox html-table

【解决方案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>

【讨论】：

感谢您的建议。我遇到此问题的页面已经具有 HTML5 文档类型。上面的 JSfiddle 也有 html 5 doctype 集。这个问题似乎很不稳定。它实际上取决于浏览器缩放级别。它仅 100% 可见，如果您将其更改为任何方向，它就会消失。
这很奇怪，如果你把我写的代码放到一个 html 文件中并在 firefox 21 中加载它，它看起来对我来说是正确的，但由于某种原因，它在小提琴上不能正常工作，即使它有一个 html5 文档类型。另外，如果我删除了 html5 文档类型，它会显示不正确——就像它在小提琴中的显示方式一样。
如果您在小提琴上调整 iframe 的宽度，边框会消失并正确呈现。我想知道是否存在导致问题的 javascript 在小提琴中调整 iframe 大小的问题。
好地方！这个问题似乎对元素的位置很敏感。随着 JSfiddle 保存窗格布局，一旦调整默认布局，问题就会消失。只有清除 jsfiddle 设置才能将其恢复。通过调整大小的窗格，我什至可以 FF 以 90% 的缩放隐藏左侧单元格边框。