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

Est-il une solution de contournement pour le suivant "1 pixel vers la gauche" 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>

Il ressemble à ceci:

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

Est-il un pur CSS solution?

Modifier

J'était un peu confus au sujet de ma table donc, ici, il est à nouveau:

Avec border-collapse:

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

Avec cellspacing="0" et sans border-collapse comme l'a suggéré:

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

Donc maintenant les frontières à l'intérieur de ma table sont doublé, mais je veux 1px frontière à travers ma table.

Quand j'enlève 1px frontière à partir de la table je termine avec:

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

Les frontières sont encore doublé à l'intérieur de ma table.

Je pouvais seulement à droite et en bas de la frontière pour chaque TD, TH et de la bordure gauche de chaque enfant dans les TR de réaliser ce que je veux, mais je pense qu'il y a un moyen plus simple?

Ce problème particulier irrite l'enfer hors de moi.
Je ne peux pas le reproduire, quelle version utilisez-vous?
J'ai copier collé votre code et je ne vois pas ce que 1px à la gauche de la chose. Firefox 3.0.11 sur mac
La version de FF? Je ne peux pas reproduire 3.0.11 avec Windows soit.
J'utilise Firefox 3.0.11 sur Mac, mais j'ai oublié de mentionner que j'utilise XHTML transitional doctype. Avec HTML3 doctype il rend sans erreurs.

InformationsquelleAutor Vexatus | 2009-06-23

border css firefox rendering

18

Enlever les border-collapse et l'utilisation cellspacing=0 à la place.

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

Cela se produit parce que lorsque vous définissez border-collapse:collapse, Firefox 2.0 met de la frontière, à l'extérieur de la tr. Les autres navigateurs le mettre à l'intérieur.

Définir votre largeurs de la bordure de 10px dans votre code pour voir ce qui se passe vraiment.

modifier après l'OP modifier

Vous pouvez utiliser la vieille table de la "frontière" truc. Définir la couleur d'arrière-plan sur la table. Définir la td et th de couleur blanc. L'utilisateur 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>

Il y a un CSS seule alternative. Veuillez voir ma réponse

InformationsquelleAutor Emily

22

Pour ceux qui préfèrent garder présentation de la majoration, ou qui n'ont pas accès à l'annotation, ici, est purement CSS solution. Viens de tomber sur ce problème moi-même, et testé cette solution dans FF3.5, IE6, IE7, IE8, Safari 4, Opera 10, et Google Chrome.
```
table { border-spacing: 0; *border-collapse: collapse; } 
```
Ceci définit la table à utiliser pour la frontière de l'espacement dans tous les navigateurs (y compris le coupable, Firefox). Puis il utilise le CSS star hack pour présenter le border-collapse règle seulement pour IE, ce qui ne veut pas appliquer correctement la frontière de l'espacement (vous pouvez aussi inclure une feuille de style distincte pour IE avec les commentaires conditionnels si vous n'aimez pas les hacks).

Si vous préférez l'utilisation de la cellule de l'espacement, par tous les moyens de l'utiliser. C'est simplement proposé comme une méthode alternative à l'aide de CSS.
- Ce doit être la accepté de répondre au lieu de cela, car nous ne serons pas à l'aide de l'ancien attribut cellspacing en HTML5.
InformationsquelleAutor

5

Ce problème n'existe plus. Dans Firefox 47.0.1, le CSS suivantes ne présentent pas le un pixel problème:

table {
  border-collapse: collapse;
}

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

Nous pouvons également obtenir propre d'un pixel frontières pour travailler sans s'appuyer sur un travail de mise en œuvre 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 que nous avons mis seulement un en haut et à gauche de la frontière sur les cellules:

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

Ce quitte la table sans un bord inférieur droit: nous style de ceux sur table

+------+------- | +-------+------+ 
| cellulaire | cellulaire | cellulaire | cellulaire | 
+------+------- + | = +-------+------+ 
| cellulaire | cellulaire | cellulaire | cellulaire | 
| | ---------+ +-------+------+

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

InformationsquelleAutor Kaz

2

table { border-spacing: 0; border-collapse: collapse; } /* fonctionne dans FF 3.5 */
- Cela ne fonctionne pas pour moi.
- Je regarde pour toi, mais j'ai oublié ce que le contexte ou le fichier.
InformationsquelleAutor chovy
2

Meilleur CSS seule solution:

Ajouter
```
td {
    background-clip: padding-box
}
```
Plus d'informations: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Grâce à @medoingthings
- Non, ne fonctionne pas sous FF. Désolé.
- Quelle version? Dans les versions que j'ai testé, il fonctionne très bien...
- Quelle que soit la version la plus récente est maintenant.
- U peut poster un violon en montrant qu'il ne fonctionne pas? Il fonctionne pour moi dans tous mes tests.
- il fonctionne pour moi 52.0.2 (64-bit) pour Ubuntu
InformationsquelleAutor helpse

2

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

n'étais pas de travail pour moi dans FF 31. Depuis que j'ai des couleurs différentes pour thead et tbody les cellules de la table background-color astuce ne fonctionnait pas, trop. La seule solution était la suivante:

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

InformationsquelleAutor Tobias Hartmann

0

Je ne pense pas que je ai jamais entendu parler d'un "1px vers la gauche bug", vous devez télécharger votre code quelque part afin que nous puissions vérifier et assurez-vous qu'il n'est pas un "j'ai raté quelque chose quelque part" bug 🙂 je vous suggère aussi de courir à travers votre balisage avec Firebug pour déterminer si il ya quelque chose va de travers.
- J'ai téléchargé le code html paste-it.net/public/kd66d41 mais j'ai oublié de mentionner dans ma question que j'utilise HXTML de transition doctype
InformationsquelleAutor Sampson
0

J'ai rencontré ce problème mais dans mon cas, il a eu à faire avec la table imbriquée à l'intérieur d'un div ensemble de overflow:hidden. Je l'ai enlevé et il a travaillé.

InformationsquelleAutor
0

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;}
```
fondamentalement trompé la frontière en utilisant une couleur d'arrière-plan. Ce qui a donc empêché double à l'intérieur des frontières.

InformationsquelleAutor Shane
0

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 jQuery magie.
- C'est un vieux post qui avait déjà accepté, et a expliqué, réponse.
- Pourquoi utiliser du JavaScript? Si cela fonctionne, vous devriez être en mesure de fixer le même avec juste le CSS.
InformationsquelleAutor oEN
0

J'ai été mordu par le présent d'aujourd'hui. Le travail de contournement ne fonctionne pas pour moi, j'ai donc trouvé mon propre:
```
table { border: 1px solid transparent; border-collapse: collapse; }
```
De cette façon, vous obtenez effondré frontières, pas de double frontières, et tout dans les limites que vous désirez, sans navigateur des règles spécifiques. Aucun inconvénients.

InformationsquelleAutor rasenplanscher
-4

J'ai aussi rencontré ce problème la preuve complète de la solution est très simple dans votre asp:gridview juste ajouter
```
GridLines="None" 
```
et les lignes disparaissent dans Firefox, pas de css modification nécessaire.
- La question n'a rien à voir avec l'ASP.
InformationsquelleAutor webGuy

Vous devez vous connecter pour publier un commentaire.