linker Rand der Tabelle Grenze ist in Firefox, aber nicht in IE 6/7 und Safari

Question

Das sieht gut aus in Safari, aber nicht in Firefox 3.0.11

Firefox abgeschnitten: http://i30.tinypic.com/fnxu2v.png

HTML für die Tabelle:

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

die CSS für die Tabelle:

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

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

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

Wer weiß, warum es in Firefox abgeschnitten wird? Heck, es sieht sogar richtig in IE6 & IE7.

Answer 1

Versuchen Sie, die Umrandung (die gleiche, die sich auf den td, th Elementen befindet) zur Tabelle selbst hinzuzufügen.

Ist es nur eine Standardtabelle? Könnte helfen, auch den HTML-Code zu posten, damit wir genau wissen, mit was Sie arbeiten.

Answer 2

Verwenden Sie CSS border-collapse auf dem Tabellenelement? Firefox rendert diese Eigenschaft anders als die anderen Browser.

Entfernen Sie den Randzusammenbruch und verwenden Sie stattdessen cellspacing = 0.

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

Es geschieht, weil, wenn Sie border-collapse gesetzt: Zusammenbruch, Firefox 2.0, die Grenze zu der Außenseite des tr setzt. Die anderen Browser legen es auf die Innenseite.

Legen Sie in Ihrem Code die Rahmenbreite auf 10px fest, um zu sehen, was wirklich passiert.

Answer 3

Dies ist ein Fehler in Firefox. box-sizing: content-box wird nicht auf Tabellenzellen angewendet, es gilt zur Zeit nur die border-box, die den Rahmen in der Höhe/Breite enthält, nicht standardisiert ist und korrigiert werden muss.

Wie es jetzt ist, ignoriert es die Grenze und Art fügt es als eine rein visuelle und nicht "physische" Grenze. Wenn Sie möchten, fügen Sie ein div oberhalb der Tabelle mit einer festen Höhe/Breite/Rahmen hinzu und sehen Sie, wie firefox rendert, dass der div-Rahmen über dem Tabellenrand liegt und ihn überlappt, als wäre er gar nicht da. Schweben Sie nun das div nach links, jetzt wird der linke Tabellenrand vom div-Rahmen überlappt.

Leider ist die einzige Möglichkeit, die ich sicherstellen kann, dass der Rahmen sichtbar ist, ein Rand hinzuzufügen: 0 1px 1em; an den Tisch.

Siehe Firefox's box-sizing spec und der Fehler, der dies verursacht: bug 243412.

Answer 4

Ich hatte ein ähnliches Problem (FF 3,6). Aber in meinem Fall bestand die Lösung darin, den th-Elementen in der Kopfzeile Grenzen hinzuzufügen (oder diese Zeile vollständig zu entfernen), für die der Rahmen nicht festgelegt war. Ich sehe, dass Sie in Ihrem Fall bereits diese Kopfzeilengrenzen haben.