CSS 带有边框折叠的 Firefox 1 像素错误，解决方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1035706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Firefox 1 pixel bug with border-collapse, workaround?
提问by Vexatus
Is there any workaround for the following "1 pixel to the left" bug?
以下“向左 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>
It looks like this:
它看起来像这样：
Is there any pure CSS solution to this?
是否有任何纯 CSS 解决方案？
Edit
编辑
I was bit unclear about my table so here it is again:
我对我的桌子有点不清楚所以又来了：
With border-collapse:
带边框折叠：
With cellspacing="0" and without border-collapse as suggested:
使用 cellpacing="0" 并且没有建议的边框折叠：
So now the borders inside my table are doubled, but I want 1px border across my table.
所以现在我的表格内的边框加倍了，但我希望我的表格有1px 的边框。
When I remove 1px border from table I end with:
当我从表格中删除 1px 边框时，我以：
Borders are still doubled inside my table.
我的桌子里面的边框仍然加倍。
I could set only right and bottom border for every TD, TH and left border for every first-child in TR to achieve what I want, but I think there's a simpler way?
我只能为 TR 中的每个第一个孩子设置右边框和下边框，TH 和左边框来实现我想要的效果，但我认为有更简单的方法吗？
采纳答案by Emily
Remove the border-collapse and use cellspacing=0 instead.
删除边框折叠并使用 cellpacing=0 代替。
<table style="border: 15px solid green; width: 100%" cellspacing="0">
It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.
发生这种情况是因为当您设置 border-collapse:collapse 时，Firefox 2.0 会将边框放在 tr 的外部。其他浏览器把它放在里面。
Set your border widths to 10px in your code to see what is really happening.
在代码中将边框宽度设置为 10px 以查看实际情况。
edit after OP edit
OP编辑后编辑
You can use the old table "border" trick. Set the background color on the table. Set the td and th color to white. User cellspacing = 1;
您可以使用旧表的“边框”技巧。在桌子上设置背景颜色。将 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>
回答by Vexatus
For those who prefer to keep presentation out of the markup, or who don't have access to the markup, here is a purely CSS solution. Just ran into this problem myself, and tested this solution in FF3.5, IE6, IE7, IE8, Safari 4, Opera 10, and Google Chrome.
对于那些喜欢将演示文稿保留在标记之外或无法访问标记的人，这里是一个纯粹的 CSS 解决方案。刚刚自己遇到了这个问题，并在 FF3.5、IE6、IE7、IE8、Safari 4、Opera 10 和 Google Chrome 中测试了这个解决方案。
table { border-spacing: 0; *border-collapse: collapse; }
This sets the table to use border-spacing in all browsers (including the culprit, Firefox). Then it uses the CSS star hack to present the border-collapse rule only to IE, which doesn't properly apply border-spacing (you could also include a separate stylesheet for IE with conditional comments if you don't like hacks).
这会将表格设置为在所有浏览器（包括罪魁祸首 Firefox）中使用边框间距。然后它使用 CSS star hack 将边框折叠规则仅呈现给 IE，它没有正确应用边框间距（如果你不喜欢 hack，你也可以为 IE 包含一个带有条件注释的单独样式表）。
If you prefer using cell-spacing, by all means use it. This is simply offered as an alternative method using CSS.
如果您更喜欢使用单元格间距，请务必使用它。这只是作为使用 CSS 的替代方法提供的。
回答by Kaz
This issue no longer exists. In Firefox 47.0.1, the following CSS doesn't exhibit the one pixel problem:
此问题不再存在。在 Firefox 47.0.1 中，以下 CSS 没有出现一像素问题：
table {
border-collapse: collapse;
}
th, td {
border: solid 1px #000;
}
We can also get clean one-pixel borders to work without relying on a working implementation of border-collapse, like this:
我们还可以在不依赖 的工作实现的情况下获得干净的单像素边框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;
}
You see what it's doing? The trick is that we put only a top and left border on the cells:
你看到它在做什么了吗？诀窍是我们只在单元格上放置了顶部和左侧边框：
+------+------
| cell | cell
+------+------
| cell | cell
This leaves the table without a right and bottom edge: we style those onto table
这使得桌子没有右边缘和底部边缘：我们将它们设置为 table
+------+------- | +-------+------+ | cell | cell | | cell | cell | +------+------- + | = +-------+------+ | cell | cell | | cell | cell | | | ---------+ +-------+------+
The border-spacing: 0is essential otherwise these lines will not connect.
该border-spacing: 0是必不可少的，否则，这些线路将无法连接。
回答by helpse
Best CSS only solution:
最佳仅 CSS 解决方案：
Add
添加
td {
background-clip: padding-box
}
More information: https://developer.mozilla.org/en-US/docs/CSS/background-clip
更多信息：https: //developer.mozilla.org/en-US/docs/CSS/background-clip
Thanks to @medoingthings
感谢@medoingthings
回答by Tobias Hartmann
table { border-spacing: 0; *border-collapse: collapse; }
wasn't working for me in FF 31. Since i've different colors for thead and tbody cells the table background-color trick wasn't working, too. The only solution was the following:
在 FF 31 中对我不起作用。由于我为头和 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;
}
}
回答by chovy
table { border-spacing: 0; border-collapse: collapse; } /* works in FF 3.5 */
表{边框间距：0; 边框折叠：折叠；} /* 适用于 FF 3.5 */
回答by rasenplanscher
I was bitten by this today. The offered work-arounds didn't work for me, so I found my own:
我今天被这个咬了。提供的解决方法对我不起作用，所以我找到了自己的：
table { border: 1px solid transparent; border-collapse: collapse; }
This way, you get collapsed borders, no double borders, and everything within the boundaries you desire, without browser-specific rules. No drawbacks.
通过这种方式，您可以获得折叠边框，没有双边框，以及您想要的边界内的所有内容，而无需特定于浏览器的规则。没有缺点。
回答by rasenplanscher
I ran into this problem - but in my case it had to do with the table being nested within a div set to overflow:hidden. I removed this and it worked.
我遇到了这个问题 - 但就我而言，它与嵌套在设置为溢出的 div 中的表有关：隐藏。我删除了它并且它起作用了。
回答by Shane
Ran into this issue and as a work around. I used :
遇到这个问题并作为解决方法。我用了 ：
table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}
basically cheated the border by using a background color. Which thus prevented double inside borders.
基本上是通过使用背景颜色来欺骗边框。从而防止了双重内部边界。
回答by oEN
My solution is as follows.
我的解决方法如下。
- Remove
border-collapse,borderandborder-spacingfrom CSS. Add this JavaScript code:
$('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');
- 从 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');
To be honest, I don't know why it works. It's jQuery magic.
老实说，我不知道它为什么有效。这是jQuery的魔法。
