web-dev-qa-db-fra.com

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

Existe-t-il une solution de contournement pour le bogue suivant "1 pixel à gauche"?

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

Cela ressemble à ceci:

Firefox CSS bug http://i42.tinypic.com/245x9ud.png

Existe-t-il une solution CSS pure à cela?

Modifier

J'étais un peu incertain sur ma table, alors la voici à nouveau:

Avec effondrement de la frontière:

Firefox CSS bug http://i42.tinypic.com/245x9ud.png

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

Firefox CSS bug http://i44.tinypic.com/2rg0qxi.png

Alors maintenant, les bordures à l'intérieur de ma table sont doubled, mais je veux une bordure de 1px sur ma table.

Lorsque je supprime la bordure 1px du tableau, je termine par:

Firefox CSS bug http://i40.tinypic.com/2vbokmq.png

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

Je ne pouvais définir que les bordures droite et inférieure pour chaque DT, TH et la bordure gauche pour chaque premier enfant de TR pour obtenir ce que je voulais, mais je pense qu'il existe un moyen plus simple?

cssfirefoxrenderingborder
34
Vexatus

Supprimez border-collapse et utilisez 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 place la bordure à l'extérieur du tr. Les autres navigateurs le mettent à l'intérieur. 

Définissez la largeur de votre bordure sur 10px dans votre code pour voir ce qui se passe réellement.

modifier après la modification de l'OP

Vous pouvez utiliser l'ancienne astuce "frontière" de la table. Définissez la couleur d'arrière-plan sur la table. Définissez les couleurs td et th sur blanc. Cellpacing utilisateur = 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>
18
Emily

Pour ceux qui préfèrent garder la présentation en dehors du balisage, ou qui n’ont pas accès au balisage, voici une solution purement CSS. J'ai moi-même rencontré ce problè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 pour utiliser l'espacement des bordures dans tous les navigateurs (y compris le coupable, Firefox). Ensuite, il utilise le hack étoile CSS pour présenter la règle de réduction de la bordure uniquement à IE, qui n’applique pas correctement l’espacement des bordures (vous pouvez également inclure une feuille de style séparée pour IE avec des commentaires conditionnels hacks). 

Si vous préférez utiliser l'espacement des cellules, utilisez-le. Ceci est simplement offert comme une méthode alternative utilisant CSS. 

22
Jon

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

table {
  border-collapse: collapse;
}

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

Nous pouvons également utiliser des bordures nettes d'un pixel sans recourir à 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 que ça fait? Le truc, c'est que nous mettons seulement une bordure supérieure et gauche sur les cellules:

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

Cela laisse la table sans bord droit et inférieur: nous appelons ceux-ci sur table 

 + ------ + ------- | + ------- + ------ + 
 | cellule | cellule | | cellule | cellule | 
 + ------ + ------- + | = + ------- + ------ + 
 | cellule | cellule | | cellule | cellule | 
 | | --------- + + ------- + ------ +

Le border-spacing: 0 est essentiel sinon ces lignes ne se connecteront pas.

5
Kaz

table {bordure-espacement: 0; effondrement de la bordure: effondrement; }/* fonctionne dans FF 3.5 * /

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

ça ne marchait pas pour moi dans FF 31. Comme j'ai des couleurs différentes pour les cellules thead et tbody, l'astuce couleur-fond du tableau ne fonctionnait pas non plus. 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;
  }
}
2
Tobias Hartmann

Meilleure solution CSS uniquement:

Ajouter

td {
    background-clip: padding-box
}

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

Merci à @medoingthings

1
helpse

Ma solution est la suivante.

  1. Supprimez border-collapse, border et border-spacing du CSS.

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

0
oEN

Je ne pense pas avoir jamais entendu parler d'un "bogue 1px vers la gauche", vous devriez télécharger votre code quelque part afin que nous puissions le vérifier et nous assurer qu'il ne s'agit pas d'un bogue "j'ai manqué quelque chose" :) parcourez votre balisage avec Firebug pour déterminer s’il ya autre chose qui ne va pas.

0
Sampson

Couru dans ce problème et comme un travail autour. 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 de fond. Ce qui empêchait donc les doubles frontières intérieures.

0
Shane

J'ai été mordu par cela aujourd'hui. Les solutions proposées ne fonctionnaient pas pour moi, alors j'ai trouvé le mien:

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

De cette façon, vous obtenez des bordures effondrées, pas de double bordure, et tout ce qui se trouve dans les limites souhaitées, sans règles spécifiques au navigateur. Aucun inconvénient.

0
rasenplanscher

J'ai rencontré ce problème - mais dans mon cas, il s'agissait de l'imbrication de la table dans un div défini sur overflow: hidden J'ai enlevé ceci et cela a fonctionné.

0
user251742