是否有解决以下“向左 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 解决方案？
编辑
我有点不清楚我的 table ，所以又来了:
边框折叠:
按照建议使用 cellspacing="0"且不使用 border-collapse:
所以现在我的表格内的边框加倍，但我希望我的表格有 1px 的边框。
当我从表格中删除 1px 边框时，我以:
边框在我的 table 内仍然加倍。
我可以只为每个 TD、TH 设置右边框和下边框，为 TR 中的每个第一个 child 设置左边框来实现我想要的，但我认为有更简单的方法吗？
最佳答案
对于那些喜欢将演示文稿排除在标记之外，或者无法访问标记的人，这里有一个纯 CSS 解决方案。我自己刚遇到这个问题，并在 FF3.5、IE6、IE7、IE8、Safari 4、Opera 10 和 Google Chrome 中测试了这个解决方案。
table { border-spacing: 0; *border-collapse: collapse; }
这会将表格设置为在所有浏览器(包括罪魁祸首 Firefox)中使用边框间距。然后它使用 CSS star hack 仅向 IE 呈现边框折叠规则，它没有正确应用边框间距(如果您不喜欢 hack，您还可以为 IE 包含一个单独的样式表和条件注释)。
如果您更喜欢使用单元格间距，请务必使用它。这只是作为使用 CSS 的替代方法提供的。
关于css - 带有边框折叠的 Firefox 1 像素错误，解决方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1035706/