Wie kann ich eine konsistente Elementbreite in allen Browsern sicherstellen?

Elementbreite und Box-Größe:** Vereinheitlichung des Browserverhaltens

Im Webdesign kann die Breite eines Elements eine Quelle für sein Verwirrung aufgrund unterschiedlicher Interpretationen durch verschiedene Browser. Beispielsweise haben Internet Explorer und Firefox diesen Aspekt in der Vergangenheit unterschiedlich gehandhabt.

Das Border-Box-Modell von IE vs. das Content-Box-Modell von FF

Traditionell wurde Internet Explorer verwendet das „Border-Box“-Modell, bei dem die Elementbreite sowohl Polsterung als auch Ränder umfasste. Deshalb:

foo {

width: 10em;
padding: 2em;
border: 1em;
}

würde ein Element mit einer Breite von 10em rendern.

Im Gegensatz dazu Firefox und andere Standardkonforme Browser verwendeten standardmäßig das „Content-Box“-Modell. Hier sind Füllungen und Ränder von der Elementbreite ausgenommen. Das gleiche CSS würde also zu einem 16em breiten Element führen:

foo {

width: 10em;
padding: 2em;
border: 1em;
}

Erreichen Konsistenz

Um das Verhalten browserübergreifend zu harmonisieren, können Entwickler die Eigenschaft box-sizing verwenden. Indem Sie es auf „border-box“ setzen:

• {
  box-sizing: border-box;

oder:<br>*{

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box

}

Moderne standardkonforme Browser, einschließlich Firefox, können gezwungen werden, das „Border-Box“-Modell zu übernehmen. Diese Deklaration unterstützt auch Opera- und Webkit-basierte Browser wie Chrome.

Beachten Sie jedoch, dass Webkit das „Padding-Box“-Modell über keine Deklaration unterstützt.

Das obige ist der detaillierte Inhalt vonWie kann ich eine konsistente Elementbreite in allen Browsern sicherstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!