Firefox 1 pixel bug avec border-collapse, solution de contournement?

pour ceux qui préfèrent garder la présentation hors du markup, ou qui n'ont pas accès au markup, voici une solution purement CSS. Je viens de rencontrer ce problème moi-même, et j'ai testé cette solution en FF3.5, IE6, IE7, IE8, Safari 4, Opera 10, et Google Chrome.

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

ce paramètre définit la table pour utiliser l'espacement des frontières dans tous les navigateurs (y compris le coupable, Firefox). Ensuite, il utilise le hack CSS star pour présenter la règle border-collapse seulement à IE, qui ne s'applique pas correctement border-spacing (vous pouvez également inclure une feuille de style séparée pour IE avec des commentaires conditionnels si vous n'aimez pas les hacks).

si vous préférez utiliser l'espacement des cellules, utilisez-le. Il s'agit simplement d'une méthode alternative utilisant les CSS.

cette question n'existe plus. Dans Firefox 47.0.1, le CSS suivant n'affiche pas le problème d'un pixel:

table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px #000;
}

nous pouvons également obtenir des bordures propres d'un pixel pour fonctionner sans compter sur une implémentation fonctionnelle de border-collapse, comme ceci:

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

Vous voyez ce qu'elle fait? Le truc, c'est qu'on ne met qu'un bord supérieur et gauche sur les cellules:

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

cela laisse la table sans bord droit et en bas: nous les coiffons sur table

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

border-spacing: 0 est essentiel sinon, ces lignes ne se connecte pas.

table { border-spacing: 0; border-collapse: collapse; } /* fonctionne dans FF 3.5 */

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

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

Je ne pense pas que j'ai jamais entendu parler d'un "1px vers le bug de gauche", vous devriez télécharger votre code quelque part pour que nous puissions le vérifier et nous assurer qu'il ne s'agit pas d'un bug "j'ai oublié quelque chose quelque part":) je suggérerais aussi de courir à travers votre markup avec Firebug pour déterminer s'il y a quelque chose d'autre qui va de travers.

j'ai rencontré ce problème-mais dans mon cas, il était lié au fait que la table était imbriquée dans un div défini à overflow:hidden. J'ai enlevé ça et ça a marché.

rencontré ce problème et que cela fonctionne. J'ai utilisé :

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

essentiellement triché la frontière en utilisant une couleur de fond. Ce qui empêchait ainsi les doubles frontières intérieures.

Ma solution est la suivante.

1. Supprimer border-collapse,border et border-spacing de CSS.

2. ajouter ce code 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');
   

Pour être honnête, je ne sais pas pourquoi cela fonctionne. C'est de la magie jQuery.

meilleure solution CSS only:

Ajouter

td {
    background-clip: padding-box
}

Plus d'informations:https://developer.mozilla.org/en-US/docs/CSS/background-clip

merci à @medoingthings

j'ai été mordu par ceci aujourd'hui. Les solutions de rechange proposées n'ont pas fonctionné pour moi, donc j'ai trouvé la mienne:

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

de cette façon, vous obtenez des bordures effondrées, pas de double bordures, et tout dans les limites que vous désirez, sans règles spécifiques au navigateur. Aucun inconvénients.

j'ai également rencontré ce problème la solution de preuve complète est très simple dans votre asp: gridview juste ajouter

GridLines="None" 

et les lignes disparaissent dans Firefox, pas de css modification nécessaire.