CSS hat die Breite das Padding?

132

Es scheint, dass in IE die Breite die Padding-Größe enthält. während in FF, die Breite nicht. Wie kann ich beide gleich verhalten?CSS hat die Breite das Padding?

Danke.

Quelle

2011-01-15 Jake

Sie müssen wahrscheinlich standardkonformen Modus aktivieren. Ohne einen Code zu sehen, kann ich Ihnen jedoch keine weitere Anleitung geben. –

283

IE verwendet, um das nutzen-bequem-aber-nicht-Standard "border-box" Box-Modell. In diesem Modell enthält die Breite eines Elements das Padding und die Ränder. Zum Beispiel:
#foo { width: 10em; padding: 2em; border: 1em; }
wäre 10em breit.
Im Gegensatz dazu, alle Standard-befürwortenden Browser standardmäßig "content-box" Box-Modell. In diesem Modell enthält die Breite eines Elements nicht Padding oder Rahmen. Zum Beispiel:
#foo { width: 10em; padding: 2em; border: 1em; }
werden tatsächlich 16em breit: 10em + 2em padding für jede Seite, + 1em Grenze für jede Kante.

Wenn Sie eine moderne Version von IE verwenden, um mit valid markup, ein good doctype und appropriate headers wird es den Standard entsprechen. Sie können aber moderne standardkonformen Browsern zwingen „border-box“ über zu verwenden:

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

Die erste Erklärung für Opera benötigt wird, die zweite ist für Firefox, die dritte ist für Webkit und Chrome.

Hier ist ein einfacher Test, den ich Jahre für die Prüfung vor dem gemacht, was Box-Sizing Erklärung Ihr Browser unterstützt: http://phrogz.net/CSS/boxsizing.html

Beachten Sie, dass Webkit (Safari und Chrome) nicht das padding-box Box-Modell über jede Erklärung unterstützen.

Quelle

2011-01-15 04:59:55 Phrogz

+1 für die Erwähnung sowohl der Inhaltsbox als auch der Borderbox-Modelle. Könnte jedoch auf die Unterschiede näher eingehen. – BoltClock

@BoltClock Danke für den Impuls, noch konsequenter zu antworten. Aktualisiert. – Phrogz

Schöne Antwort; Ich habe versucht, die Namen der verschiedenen Optionen für ein paar Tage zu erinnern (oder zu finden) ... +1 =) –

Eine einfache Regel besteht darin, zu versuchen, die Verwendung der Eigenschaften padding/margin und width für dasselbe Element zu vermeiden. Verwenden Sie das heißt etwas ähnliches zu diesem

<div class="width-div"> 
    <div class="padding-div"> 
    ........... 
    ........... 
    </div> 
</div>

Quelle

2011-01-15 04:59:44 shankhan

Ich benutze diese Methode regelmäßig und habe nie Cross-Browser-Probleme damit. –

Haben Sie einen Doctype deklariert? Als ich mit der Programmierung von html begann, hatte ich dieses Problem, und es wurde von keinem Doctype deklariert. Mein Favorit 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>

Quelle

2011-01-15 15:28:23 tybro0103

ich in diese Frage gestoßen und obwohl es ein paar Jahre alt, ich dachte, ich könnte dies jemand Bumps in diesen Thread, falls hinzuzufügen.

CSS3 verfügt nun über eine Box-Sizing-Eigenschaft. Wenn Sie beispielsweise

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

festlegen, wird Ihre Klasse 1000px breit anstelle von 1030px sein. Dies ist natürlich sehr nützlich für jeden, der eine Pixel-Grenze mit flüssigen Divs verwendet, weil es ein ansonsten unlösbares Problem löst.

Noch besser, Box-Sizing wird von allen gängigen Browsern mit Ausnahme von IE7 und darunter unterstützt.Zu gehören alle Elemente innerhalb der Breite oder Höhe Dimension, Box-Sizing zu Rand-Box. Um Aggregat andere Elemente auf die Breite und/oder Höhe, die die Standardeinstellung ist, können Sie Box-Sizing auf "Content-Box" festlegen.

Ich bin nicht sicher über den aktuellen Stand der Browser-Syntax, aber ich bin immer noch -moz und -webkit Präfixe:

.bigbox{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

Quelle

2014-02-10 17:36:09

Ja, und Paul Irish hat einen schönen Blogartikel hier: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ –

CSS hat die Breite das Padding?

Antwort

Verwandte Themen