Firefox 1像素边框合并问题，有解决方法吗？

Question

Firefox 1像素边框合并问题，有解决方法吗？

38

有没有针对以下“向左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的解决方案呢？

编辑

我的表格描述可能不太清楚，所以再描述一遍:

使用border-collapse属性：

使用cellspacing="0"和建议的不使用border-collapse：

现在我的表格内部边框被加倍了，但我想要整个表格只有1像素的边框。

当我从表格中移除1像素的边框时，结果如下:

表格内部边框仍然被加倍了。

我可以为每个TD、TH设置只有右边和底部的边框，对于每个TR中的第一个子元素设置左侧边框来实现我的要求，但我认为是否有更简单的方法呢？

- Vexatus

10

这个问题真的让我恼火。 - cletus

我无法再现它，你使用的是哪个版本？ - cobbal

我复制粘贴了你的代码，但是我没有看到那个向左1像素的东西。我在Mac上使用的是Firefox 3.0.11。 - Hardwareguy

哪个版本的FF？我在Windows上也无法重现3.0.11。 - Dirk Vollmar

我在Mac上使用Firefox 3.0.11，但忘记提到我使用XHTML transitional doctype。使用HTML3 doctype时，它可以正常呈现而没有任何错误。 - Vexatus

12个回答

19

移除border-collapse属性并使用cellspacing=0代替。

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

这是因为当你设置border-collapse:collapse时，Firefox 2.0将边框放在的外面，而其他浏览器则将其放在里面。

在你的代码中将边框宽度设置为10px，以查看实际发生了什么。

编辑后

你可以使用旧的表格“边框”技巧。将表格的背景颜色设置为您想要的颜色。将和颜色设置为白色。使用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>

- Emily

2

有一种仅使用CSS的替代方案。请查看我的答案。 - helpse

@helpse 肯定得到了最好的答案 - Dany

确实，使用@helpse的答案更容易、更清晰、更好！ :) - Gykonik

8

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

- Kaz

我在Chrome v78中遇到了高度和宽度的问题，在Firefox v70中遇到了宽度的问题。Safari一如既往地表现出色！这个答案解决了我的问题。谢谢！ - cyonder

7

最佳纯CSS解决方案：

添加

td {
    background-clip: padding-box
}

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

感谢@medoingthings

- helpse

无论现在最新版本是什么。 - HartleySan

你能否发布一个 fiddle 来展示它不起作用吗？在我所有的测试中它都是有效的。 - helpse

2

迄今为止最佳答案 - Dany

迄今为止最好的！谢谢！ - JGoodgive

2

今天我遇到了这个问题。提供的解决方案对我没有用，所以我自己找到了解决方法：

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

这样做可以获得折叠边框，避免重复边框，并且在不需要浏览器特定规则的情况下，实现您所需的边界内所有内容。没有任何缺点。

- rasenplanscher

2

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

由于我在使用Firefox 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;
  }
}

- Tobias Hartmann

2

表格 {边距: 0; 边框合并: 合并;} /* 在Firefox 3.5中有效 */

- chovy

我会找你的，但我忘记了上下文是什么或者是哪个文件。 - chovy

0

遇到了这个问题，我使用了一个解决方法：

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

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

- Shane

0

我的解决方案如下。

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

- oEN

这是一篇旧帖子，已经有了一个被接受并解释的答案。 - Jeremy J Starcher

1

为什么要使用JavaScript？如果这个可以实现，你应该只需要用CSS就能设置相同的效果。 - Brad

0

我遇到了这个问题 - 但在我的情况下，它与嵌套在设置为overflow:hidden的div中的表有关。我删除了这个设置，然后它就正常运行了。

- user251742

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon · Accepted Answer

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

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

这将设置表格在所有浏览器中（包括罪魁祸首Firefox）使用border-spacing。然后，它使用CSS星号hack仅向IE呈现border-collapse规则，因为IE不能正确应用border-spacing（如果您不喜欢hack，也可以使用条件注释为IE包含单独的样式表）。

如果您更喜欢使用cell-spacing，请随意使用。这只是提供了一种使用CSS的替代方法。