Firefox 1 pixel bug with border-collapse, workaround?

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

My solution is as follows.

1. Remove border-collapse, border and border-spacing from CSS.

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

Answer 5

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.

Answer 6

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.