Firefox 1 像素错误与边框折叠，解决方法吗？

发布于 2024-07-25 02:55:15 字数 1794 浏览 6 评论 0原文

对于以下“向左 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" 且没有边框折叠：

所以现在我的表格内的边框是加倍，但我希望表格的边框为 1 像素。

当我从表格中删除 1px 边框时，我以以下内容结尾：

我的表格内的边框仍然是双倍的。

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

原文

Is there any workaround for the following "1 pixel to the left" bug?

    <!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?

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:

So now the borders inside my table are doubled, but I want 1px border across my table.

When I remove 1px border from table I end with:

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一身仙ぐ女味 2024-08-01 02:55:15

对于那些喜欢将演示文稿排除在标记之外或无法访问标记的人，这里有一个纯粹的 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 的替代方法提供的。

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.

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).

If you prefer using cell-spacing, by all means use it. This is simply offered as an alternative method using CSS.

回复收藏 0 原文

德意的啸 2024-08-01 02:55:15

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

Remove the border-collapse and use cellspacing=0 instead.

<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.

Set your border widths to 10px in your code to see what is really happening.

edit after OP edit

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;

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>

回复收藏 0 原文

梦醒灬来后我 2024-08-01 02:55:15

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

This issue no longer exists. In Firefox 47.0.1, the following CSS doesn't exhibit the one pixel problem:

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:

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

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

The border-spacing: 0 is essential otherwise these lines will not connect.

回复收藏 0 原文

方圜几里 2024-08-01 02:55:15

最佳仅 CSS 解决方案：

添加

td {
    background-clip: padding-box
}

感谢@medoingthings

Best CSS only solution:

Add

td {
    background-clip: padding-box
}

More information: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Thanks to @medoingthings

回复收藏 0 原文

暗恋未遂 2024-08-01 02:55:15

表{边框间距：0; 边界崩溃：崩溃； } /* 适用于 FF 3.5 */

回复收藏 0 原文

萧瑟寒风 2024-08-01 02:55:15

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

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:

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

回复收藏 0 原文

眼眸印温柔 2024-08-01 02:55:15

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

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

这样，您就可以获得折叠边框，没有双边框，并且一切都在您想要的边界内，而无需特定于浏览器的规则。没有缺点。

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.

回复收藏 0 原文

哑剧 2024-08-01 02:55:15

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

回复收藏 0 原文

凉风有信 2024-08-01 02:55:15

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

回复收藏 0 原文

懒的傷心 2024-08-01 02:55:15

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

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

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

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.

回复收藏 0 原文

萝莉病 2024-08-01 02:55:15

我的解决方案如下。

从 CSS 中删除 border-collapse、border 和 border-spacing。

添加此 JavaScript 代码：

$('table tbody tr td').css('border-right', '1pxsolid #a25c17'); 
  $('table tbody tr td').css('border-bottom', '1pxsolid #a25c17'); 
  $('table tbody tr td:last-child').css('border-right', 'none'); 
  $('table').css('border-bottom', '1pxsolid #a25c17');

说实话，我不知道它为什么起作用。这是 jQuery 的魔力。

My solution is as follows.

Remove border-collapse, border and border-spacing from 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');

To be honest, I don't know why it works. It's jQuery magic.

回复收藏 0 原文