带有边框折叠的 Firefox 1 像素错误，解决方法？答案

【问题标题】：Firefox 1 pixel bug with border-collapse, workaround?带有边框折叠的 Firefox 1 像素错误，解决方法？
【发布时间】：2010-11-05 08:41:48
【问题描述】：

对于以下“向左 1 个像素”的错误是否有任何解决方法？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
    <tbody>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
        <tr>
            <td>Hello</td>
            <td>World</td>
        </tr>
    </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>

看起来像这样：

有没有纯 CSS 解决方案？

编辑

我对我的桌子有点不清楚，所以又来了：

带边框折叠：

按照建议使用 cellspacing="0" 并且没有边框折叠：

所以现在我的表格内的边框是加倍，但我希望我的表格有 1px 的边框。

当我从表格中删除 1px 边框时，我的结尾是：

我的桌子内的边框仍然是双倍的。

我可以为 TR 中的每个第一个子项的每个 TD、TH 和左边框设置仅右边框和下边框以实现我想要的，但我认为有更简单的方法？

【问题讨论】：

这个特殊的问题让我非常恼火。
复制不了，你用的是什么版本？
我复制粘贴了您的代码，但看不到左边的 1px。 Mac 上的 Firefox 3.0.11
哪个版本的FF？我也无法在 Windows 上使用 3.0.11 重现。
我在 Mac 上使用 Firefox 3.0.11，但忘了提到我使用 XHTML 过渡文档类型。使用 HTML3 doctype，它可以毫无错误地呈现。

标签： css firefox rendering border

【解决方案1】：

我想我从来没有听说过“向左 1px 的错误”，您应该将代码上传到某个地方，以便我们检查它并确保它不是“我在某处遗漏了什么”错误 :) 我还建议使用 Firebug 运行您的标记以确定是否还有其他问题。

【讨论】：

我已将 html 上传到 paste-it.net/public/kd66d41，但我忘记在我的问题中提到我使用 HXTML 过渡文档类型

【解决方案2】：

删除边框折叠并使用 cellspacing=0 代替。

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

这是因为当您设置border-collapse:collapse 时，Firefox 2.0 将边框置于tr 之外。其他浏览器把它放在里面。

在代码中将边框宽度设置为 10px 以查看实际情况。

OP 编辑后编辑

您可以使用旧的表格“边框”技巧。在桌子上设置背景颜色。将 td 和 th 颜色设置为白色。用户单元格间距 = 1;

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>

【讨论】：

只有 CSS 替代方案。请看我的回答
@helpse 肯定得到了最佳答案
确实，使用@helpse 的答案，更简单、更干净、更好！ :)

【解决方案3】：

对于那些喜欢不显示标记或无法访问标记的人来说，这是一个纯粹的 CSS 解决方案。自己也遇到了这个问题，在FF3.5、IE6、IE7、IE8、Safari 4、Opera 10、谷歌浏览器中测试了这个解决方案。

table { border-spacing: 0; *border-collapse: collapse; }

这会将表格设置为在所有浏览器（包括罪魁祸首 Firefox）中使用边框间距。然后它使用 CSS star hack 仅向 IE 呈现边框折叠规则，它没有正确应用边框间距（如果您不喜欢 hack，您还可以为带有条件 cmets 的 IE 包含单独的样式表）。

如果您更喜欢使用单元格间距，请务必使用它。这只是作为使用 CSS 的替代方法提供的。

【讨论】：

这个应该是公认的答案，因为我们不会在 HTML5 中使用旧的 cellspacing 属性。

【解决方案4】：

表格{边框间距：0；边框折叠：折叠； } /* 适用于 FF 3.5 */

【讨论】：

我想找你，但我忘记了上下文是什么或哪个文件。

【解决方案5】：

我遇到了这个问题 - 但在我的情况下，它与嵌套在设置为溢出的 div 中的表有关：隐藏。我删除了它，它起作用了。

【讨论】：

【解决方案6】：

遇到此问题并作为解决方法。我用过：

table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}

基本上通过使用背景颜色来欺骗边框。从而防止了双重内边框。

【讨论】：

【解决方案7】：

我也遇到过这个问题，完整的证明解决方案在你的 asp:gridview 中非常简单，只需添加

GridLines="None"

这些行在 Firefox 中消失了，无需修改 css。

【讨论】：

问题与ASP无关。

【解决方案8】：

我的解决方法如下。

从 CSS 中删除 border-collapse、border 和 border-spacing。

添加此 JavaScript 代码：

$('table tbody tr td').css('border-right', '1px solid #a25c17');
$('table tbody tr td').css('border-bottom', '1px solid #a25c17');
$('table tbody tr td:last-child').css('border-right', 'none');
$('table').css('border-bottom', '1px solid #a25c17');

说实话，我不知道它为什么会起作用。这是 jQuery 的魔法。

【讨论】：

这是一篇旧帖子，已经有一个接受并解释过的答案。
为什么要使用 JavaScript？如果这可行，您应该能够仅使用 CSS 进行设置。

【解决方案9】：

最好的纯 CSS 解决方案：

添加

td {
    background-clip: padding-box
}

感谢@medoingthings

【讨论】：

现在的最新版本是什么。
你能发布一个小提琴显示它不工作吗？它适用于我的所有测试。
迄今为止的最佳答案
迄今为止最好的！谢谢！

【解决方案10】：

table { border-spacing: 0; *border-collapse: collapse; }

在 FF 31 中对我不起作用。由于我为 thead 和 tbody 单元格设置了不同的颜色，因此表格背景色技巧也不起作用。唯一的解决方案如下：

table {
  border-collapse: separate;
}    
table tbody td {
  border: 1px solid #000;
  border-top: none;
  border-left: none;

  &:first-child {
    border-left: 1px solid #000;
  }
}
table thead th {
  border-bottom: 1px solid #ff0000;

  &:first-child {
    border-left: 1px solid #ff0000;
  }
  &:last-child {
    border-right: 1px solid #ff0000;
  }
}

【讨论】：

【解决方案11】：

这个问题已经不存在了。在 Firefox 47.0.1 中，以下 CSS 不会出现单像素问题：

table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px #000;
}

我们还可以在不依赖border-collapse 的有效实现的情况下获得干净的单像素边框，如下所示：

table {
  border: solid 1px #000;
  border-width: 0 1px 1px 0;
  border-spacing: 0;
}

th, td {
  border: solid 1px #000;
  border-width: 1px 0 0 1px;
}

你看到它在做什么了吗？诀窍是我们只在单元格上放置了顶部和左侧边框：

 +------+------
 | cell | cell
 +------+------
 | cell | cell

这使得表格没有右边缘和下边缘：我们将它们设置为table

+--------+------- | +--------+------+ |细胞 |细胞 | |细胞 |细胞 | +--------+------- + | = +--------+------+ |细胞 |细胞 | |细胞 |细胞 | | | ---------+ +--------+------+

border-spacing: 0 是必不可少的，否则这些线路将无法连接。

【讨论】：

我有这个问题：Chrome v78 的高度和宽度，Firefox v70 的宽度。 Safari 一如既往的震撼！这个答案解决了我的问题。谢谢！

【解决方案12】：

我今天被这个咬了。提供的解决方法对我不起作用，所以我找到了自己的解决方法：

table { border: 1px solid transparent; border-collapse: collapse; }

这样，您可以得到折叠的边框，没有双边框，并且所有内容都在您想要的范围内，没有特定于浏览器的规则。没有缺点。

【讨论】：