bord gauche de la bordure table est coupée dans Firefox, mais pas dans IE 6/7 et Safari

Question

Cela ressemble bien dans Safari, mais pas dans Firefox 3.0.11

Firefox: http://i31.tinypic.com/11s1d00.png

Safari: http://i30.tinypic.com/fnxu2v.png

HTML pour la table:

<table class="placement-testing-schedule"> 
    <tr> 
    <th>Day</th> 
    <th>Date</th> 
    <th>Check-in Begins (Entrance of College Center)</th> 
    <th>Test Begins</th> 
    <th>Registration Begins</th> 
    <th>Seating Availability</th> 
</tr> 
<tr> 
    <td>Tue</td> 
    <td>8/18/09</td> 
    <td>10:45 AM</td> 
    <td>10:00 AM</td> 
    <td>12:30 PM</td> 
    <td><span class="open">Open</span></td> 
</tr> 
<tr> 
    <td>Wed</td> 
    <td>8/26/09</td> 
    <td>10:45 AM</td> 
    <td>10:00 AM</td> 
    <td>12:30 PM</td> 
    <td><span class="open">Open</span></td> 
</tr> 
</table> 

le css pour la table:

/* ---------- Placement Testing ----------- */ 

.content-body .col-middle table.placement-testing-schedule { 
    margin-bottom:10px; 
    border-spacing:10px; 
} 

table {border-collapse: collapse; }

.content-body .col-middle table.placement-testing-schedule td, th { 
    border:1px solid #055830; 
    background-color:#ffc; 
    padding:7px; 
} 

.content-body .col-middle table.placement-testing-schedule th { 
    background-color:#fdbe2f; 
} 

Quelqu'un sait pourquoi il est coupé dans firefox? Heck, il semble même correct dans IE6 & IE7.

Answer 1

Essayez d'ajouter la bordure (la même sur les éléments td, th) à la table elle-même.

Est-ce juste une table standard? Cela pourrait aider à publier le code HTML, nous savons donc exactement avec quoi vous travaillez.

Answer 2

Utilisez-vous CSS border-collapse sur l'élément table? Firefox rend cette propriété différemment des autres navigateurs.

Supprimez la bordure-collapse et utilisez plutôt cellspacing = 0.

<table style="border: 1px solid #000;" cellspacing="0"> 

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

Définissez vos largeurs de bordure à 10px dans votre code pour voir ce qui se passe réellement.

Answer 3

Ceci est un bug dans Firefox. box-sizing: content-box n'est pas appliqué aux cellules de la table, il applique actuellement uniquement border-box qui inclut la bordure dans la hauteur/largeur, il est non-standard et doit être corrigé. Comme c'est le cas maintenant, il ignore la bordure et l'ajoute comme une bordure purement visuelle et non "physique". Si vous voulez, ajoutez un div au-dessus de la table avec une hauteur/largeur/bordure fixe et voyez comme firefox rend la frontière de cette div au-dessus de la bordure de la table, en la chevauchant comme si elle n'était même pas là. Maintenant, faites flotter la div vers la gauche, maintenant la bordure gauche de la table est chevauchée par la bordure de la div.

Malheureusement, la seule façon que j'ai trouvée pour m'assurer que la bordure est visible est d'ajouter une marge: 0 1px 1em; à la table.

Voir Firefox's box-sizing spec et le bogue qui provoque cette erreur: bug 243412.

Answer 4

J'ai eu un problème similaire (FF 3.6). Mais la solution dans mon cas était juste d'ajouter des bordures aux éléments th de la ligne d'en-tête (ou de supprimer complètement cette ligne), qui n'avait pas la bordure définie. Je vois que dans votre cas, vous avez déjà ces frontières de lignes d'en-tête.