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

Question

以下“向左 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 边框时，我以：

我的桌子内的边框仍然加倍。

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

score 22 · Accepted Answer

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

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

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

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

score 18 · Accepted Answer

删除边框折叠并使用 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>

score 8 · Accepted Answer

这个问题已经不存在了。在 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是必不可少的，否则这些线将无法连接。

score 7 · Accepted Answer

最好的纯 CSS 解决方案：

添加

td {
    background-clip: padding-box
}

更多信息：https ://developer.mozilla.org/en-US/docs/CSS/background-clip

感谢@medoingthings

score 2 · Accepted Answer

2

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

于 2009-11-10T22:23:27.150 回答

score 2 · Accepted Answer

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;
  }
}

score 1 · Accepted Answer

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

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

这样，您将获得折叠的边框，没有双边框，以及您想要的边界内的所有内容，而无需浏览器特定的规则。没有缺点。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

遇到这个问题并作为解决方法。我用了：

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

基本上通过使用背景颜色来欺骗边框。因此防止了双重内部边界。

score 0 · Accepted Answer

我的解决方案如下。

从 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 的魔法。

score -4 · Accepted Answer

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

GridLines="None"

并且这些行在 Firefox 中消失了，不需要修改 css。

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

编辑

12 回答 12

Related

Reference