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边框时，我以：

结束

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

我可以为TR中的每个第一个孩子设置每个TD，TH和左边界的右边和右边边框，以达到我想要的效果，但我认为有更简单的方法吗？

Answer 1

对于那些喜欢将演示文稿保留在标记之外或者无法访问标记的人来说，这里只是一个纯CSS解决方案。我自己遇到了这个问题，并在FF3.5，IE6，IE7，IE8，Safari 4，Opera 10和Google Chrome中测试了这个解决方案。

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

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

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

Answer 2

删除border-collapse并使用cellspacing = 0代替。

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

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

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

OP编辑后

编辑

你可以使用旧表“边框”技巧。在表格上设置背景颜色。将td和th颜色设置为白色。用户cellspacing = 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>

Answer 3

此问题不再存在。在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

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

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

Answer 4

table {border-spacing：0;边界崩溃：崩溃; } / *适用于FF 3.5 * /

Answer 5

最佳CSS解决方案：

添加

td {
    background-clip: padding-box
}

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

感谢@medoingthings

Answer 6

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

Answer 7

我认为我从来没有听说过“1px到左边的bug”，你应该在某个地方上传你的代码，这样我们就可以检查它并确保它不是“我错过了某个地方”的bug :)我还建议用Firebug运行你的标记，以确定是否还有其他问题。

Answer 8

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

Answer 9

进入这个问题并作为解决方法。我用过：

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

基本上使用背景颜色欺骗边框。这因此阻止了内部双重边界。

Answer 10

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

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

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

Answer 11

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

GridLines="None"

并且Firefox中的行消失，无需修改css。

Firefox 1像素错误与边界崩溃，解决方法？

修改

11 个答案: