Firefox 1 pixel bug with border-collapse, workaround?

Question

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

Answer 1

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.