Tabelle Zelle eine Feste Höhe und border-Problem im Firefox

Ich habe eine Tabelle anzeigen, einige Daten, und ich brauche die Tabelle Zelle <td> haben eine Feste Höhe und einen unteren Rand. Das problem ist, dass Firefox-rendering die Zellenhöhe anders als Chrome oder IE8. Ich habe z.B. die folgenden css-Regeln:

table {
    width: 100%;
    border-collapse: collapse;
}

table td {
    height: 35px;
    border-bottom: 1px solid #000;
}

Firefox rendert die Grenze innerhalb der Zelle, die definierte Höhe, so zeigt es 34px height + 1px border. Chrome und IE aber machen, die volle Höhe und zeigt die Grenze außen/unten, also es zeigt 35px height + 1px border.

Hier ist eine Vorschau der Ausgabe http://jsbin.com/oseqiz/9/. (öffnen Sie Sie in Firefox und Chrome/IE, den Unterschied zu sehen).

Ist dies ein bekannter bug in Firefox, oder sind die 2 anderen Browsern, Dinge zu tun falsch. Wenn ja, gibt es eine Lösung dafür?

Ich möchte darauf hinweisen, dass ich nicht gerne mit der zusätzliche <div> innerhalb der <td> wie ich für die zweite Tabelle in der oben jsbin-Beispiel. Implementiert habe ich es so, so dass die rendering-Problem kann leicht gesehen werden.

  • vielleicht hilft Sie - css-tricks.com/7323-box-sizing - irgendeinen Grund, warum Ihr td-shows zu sein, 18.4 px in IE9 auf windows 7?
  • Entfernen border-collapse: collapse; und hinzufügen von box-sizing: border-box; und -moz-box-sizing: border-box;, um zu sehen, was passiert.
  • Danke für die Antwort, aber es scheint nicht zu viel gutes tun. border-box scheint default-Wert für den box-sizing in Firefox so, ich habe versucht, den gleichen Wert für -webkit-box-sizing und erwartet das gleiche Ergebnis in chrome. Aber es scheint nicht zu Rolle, als chrome noch berechnet die Höhe 35px - http://jsbin.com/oseqiz/18/
  • auch in der Antwort auf Ihre Frage über die Höhe in IE9 auf Windows 7. Für mich macht es das gleiche wie in Chrome 35px. Ich überprüfte die Metriken mit DebugBar auf IE und das berechnete layout Wert für die Höhe 35px. Das gleiche Tat ich mit den Developer Tools in Chrome und habe 35px und mit Firebug in Firefox und dort bekomme ich 34px unabhängig davon, wie ich die box-sizing mit dem Wert.
  • Ich kann mich irren, aber ist nicht box-sizing: content-box der Wert default im Firefox? Suchen Sie es in Firebug auf Firefox und die Registerkarte "layout" mit dem box-Modell und die Abmessungen und an der Unterseite es sagt box-sizing: content-box. Auch developer.mozilla.org/en/CSS/box-sizing
  • Es scheint, Firfox hat einen zusätzlichen Wert, der nicht in den Normen. Abgesehen von der "content-box" ist der default-Wert und "border-box" hat es auch die "padding-box" - Wert. Allerdings scheint es unterschiedliche Werte haben keinen Effekt.
  • Mal sehen, was passiert mit diesem - stackoverflow.com/questions/7554731/...

InformationsquelleAutor Bogdan | 2011-09-25
  1. 0

    Ok, bitte Lesen Sie diese

    css-Eigenschaft box-sizing hat keine Auswirkung auf das box-Modell

    Einen workaround könnte, ist,

    td
{
display: inline-block;
}

    Und als

    td
{
box-sizing: content-box;
}

    Für eine cross-browser-gleiche Höhe <td>

    • Danke für den Vorschlag aber das hinzufügen display: inline-block nur verwirrt die Dinge sogar noch weiter. Ich vergaß zu erwähnen, - und einbinden in meine jsbin erste Beispiel - die Tatsache, dass eine Zelle in meiner Tabelle mit Flüssigkeit ( width: auto ), während der rest eine Feste Breite haben. Ändern der display Eigenschaft inline-block reduziert die Breite der flüssigkeitssäule.
    • Aber es funktioniert Rendern der Höhe korrekt als 35px (das ist leider wenig hilfreich, solange der rest des Layouts ist ruiniert)
    • tut es versauen, selbst wenn u setzen Sie die display: inline-block für alle td-außer dem einen, dass Sie wollen Flüssigkeit.
    • Ja, es tut es Durcheinander (wenn auch nicht so stark, wie wenn die Flüssigkeit hatte man auch inline-block)
    • gib mir deinen code für die Tabelle, bitte. Einige celever Kodierung positioing zusammen mit dem display kann man die gewünschten Ergebnisse, die Sie wollen.
    • Sie können es hier http://jsfiddle.net/U8mxE/1/.
    • Die Implikationen dieser Antwort ist schrecklich
    • Sie sind wellcomed zu downvote oder mit einer Antwort, die die "Auswirkungen sind nicht schrecklich"

    InformationsquelleAutor Jawad
  2. 0

    Dieses Problem scheint behoben mit der neuesten version von Firefox (was zu dieser Zeit ist version 40), und die Höhe und die Grenze ist jetzt gerendert konsequent in allen genannten Browsern.

    InformationsquelleAutor Bogdan
Schreibe einen Kommentar