CSS enthält die Breite die Polsterung?

146

Es scheint, dass im IE die Breite die Auffüllgröße enthält. während in FF die Breite nicht. Wie kann ich dafür sorgen, dass sich beide gleich verhalten?

Vielen Dank.

css Jake
quelle
Sie müssen wahrscheinlich den standardkonformen Modus aktivieren. Ohne Code zu sehen, kann ich Ihnen jedoch keine weitere Anleitung geben.
Jeff Hubbard

Antworten:

307

  • IE verwendete früher das bequemere, aber nicht standardmäßige "Border-Box" -Box-Modell. In diesem Modell umfasst die Breite eines Elements die Auffüllung und die Ränder. Zum Beispiel:
    #foo { width: 10em; padding: 2em; border: 1em; }
    wäre 10embreit.

  • Im Gegensatz dazu verwenden alle standardbedrohenden Browser standardmäßig das Box-Modell "Content-Box" . In diesem Modell ist die Breite eines Elements nicht Klotzen oder Grenzen umfasst. Zum Beispiel:
    #foo { width: 10em; padding: 2em; border: 1em; }
    wird tatsächlich 16embreit sein: 10em+ 2emPolsterung für jede Seite, + 1emRand für jede Kante.

Wenn Sie eine moderne Version des IE mit gültigem Markup , einem guten Doctype und entsprechenden Headern verwenden, entspricht dies dem Standard. Andernfalls können Sie moderne standardkonforme Browser zwingen, "Border-Box" zu verwenden, und zwar über:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Die erste Deklaration wird für Opera benötigt, die zweite für Firefox, die dritte für Webkit und Chrome.

Hier ist ein einfacher Test, den ich vor Jahren durchgeführt habe, um zu testen, welche Box-Sizing-Deklaration Ihr Browser unterstützt: http://phrogz.net/CSS/boxsizing.html

Beachten Sie, dass Webkit (Safari und Chrome) das padding-boxBox-Modell über keine Deklaration unterstützt.

Phrogz
quelle
2
+1 für die Erwähnung der Modelle Content Box und Border Box. Vielleicht möchten Sie die Unterschiede näher erläutern.
BoltClock
1
@BoltClock Vielen Dank für den Anstoß, strenger zu antworten. Aktualisiert.
Phrogz
Gute Antwort; Ich habe seit ein paar Tagen versucht, mich an die Namen der verschiedenen Optionen zu erinnern (oder sie zu finden) ... +1 =)
David sagt, Monica am
Die Oper interessiert niemanden.
Michael J. Calkins
3
@whitelettersinblankpapers Sehen Sie, warum W3Schools scheiße ist und dann eine weitaus bessere Referenz, die Sie zum W3C-Standard führt . Folgen Sie keinen weiteren Links zu W3Schools. Fügen Sie außerdem in Zukunft "MDN" zu Ihren Suchmaschinenabfragen zu Webstandards hinzu.
Phrogz
27

Eine einfache Regel besteht darin, zu vermeiden, dass für dasselbe Element die Eigenschaften padding / margin und width verwendet werden. dh Verwenden Sie etwas Ähnliches

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>
Shankhan
quelle
Ich verwende diese Methode regelmäßig und habe nie browserübergreifende Probleme damit.
Kevin Beal
20

Ich bin auf diese Frage gestoßen, und obwohl sie ein paar Jahre alt ist, dachte ich, ich könnte sie hinzufügen, falls jemand auf diesen Thread stößt.

CSS3 verfügt jetzt über eine Box-Sizing-Eigenschaft. Wenn Sie einstellen, sagen Sie,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

Ihre Klasse wird 1000px breit sein, anstatt 1030px. Dies ist natürlich unglaublich nützlich für alle, die einen pixelgroßen Rand mit flüssigen Divs verwenden, da dies ein ansonsten unlösbares Problem löst.

Noch besser ist, dass die Box-Größe von allen gängigen Browsern außer IE7 und darunter unterstützt wird. Um umfasst alle Elemente innerhalb der Breite oder Höhe Dimension - Set - Box-Sizing border-Box. Um andere Elemente auf die Standardbreite und / oder -höhe zu aggregieren , können Sie die Boxgröße auf "Inhaltsfeld" setzen.

Ich bin mir nicht sicher über den aktuellen Stand der Browsersyntax, aber ich füge immer noch die Präfixe -moz und -webkit hinzu:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
Mason Barge
quelle
Ja, und Paul Irish hat hier einen schönen Blog-Artikel dazu: paulirish.com/2012/box-sizing-border-box-ftw
Dave Burton
Wie diese Antwort hat so viele positive Stimmen, wenn die gleiche Antwort wie die akzeptierte, die geschrieben wurde, 3 Jahre zuvor ist?
Dippas
1

Haben Sie einen Doctype deklariert? Als ich anfing, HTML zu codieren, hatte ich dieses Problem, weil kein Doctype deklariert wurde. Mein Liebling ist:

<!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" lang="en">
...
</html>
tybro0103
quelle
1

Für diejenigen, die immer noch das Problem haben würden, stellte jQuery zwei Eigenschaften zur Verfügung outerWidth ()und innerWitdh ()um die Breite eines Objekts mit oder ohne Rahmen zu kennen ...

Patrick
quelle