Heim > Artikel > Web-Frontend > CSS Magic Hall: HasLayout sieht so aus!

CSS Magic Hall: HasLayout sieht so aus!

巴扎黑Original: 2017-06-28 11:13:041141Durchsuche

Vorwort

Ich habe immer gehört, dass viele seltsame Fehler in alten Versionen des IE durch einen mysteriösen Charakter verursacht werden, nämlich hasLayout. Ich nutze die plötzliche Nervosität der letzten Zeit aus, um CSS gut zu lernen und die Zweifel zu beantworten, die ich seit vielen Jahren habe.

Wer ist hasLayout?

hasLayout kann einfach als BFC (Block Formatting Context) in IE5.5/6/7 betrachtet werden. Das heißt, ein -Element organisiert und berechnet entweder seinen eigenen Inhalt selbst (d. h. legt seine eigene Breite und Höhe durch Breite/Höhe fest), oder sein enthaltender Block organisiert und berechnet seine Größe. Was IFC betrifft (das heißt, es hat kein Layout), kann das -Element die Größe seines eigenen Inhalts nicht organisieren und berechnen, aber sein eigener Inhalt bestimmt seine Größe (das heißt, es kann nur Zeilenhöhe Legen Sie den Zeilenabstand des Inhalts fest und verwenden Sie den Zeilenabstand, um die Höhe des Elements zu unterstützen. Sie können die Elementbreite nicht durch die Breite festlegen, sie kann nur durch den Inhalt bestimmt werden)
Wenn hasLayout wahr ist (dies ist das sogenannte „eigene Layout“), was dem Generieren eines neuen BFC durch das Element entspricht und das Element selbst die Größe seines eigenen Inhalts organisiert und berechnet
Wenn hasLayout falsch ist; (das sogenannte „hat kein Layout“), entspricht der Tatsache, dass das Element keinen neuen BFC generiert, und das Element wird durch seinen Inhalt bestimmt. Der enthaltende Block, zu dem es gehört, führt Organisations- und Größenberechnungen durch.
Ähnlich wie die Funktion, die neue BFCs generiert, kann hasLayout nicht direkt über CSS-Eigenschaften festgelegt werden. Stattdessen wird diese Funktion indirekt über bestimmte CSS-Eigenschaften aktiviert. Der Unterschied besteht darin, dass einige CSS-Eigenschaften hasLayout indirekt und irreversibel auf true setzen. Und standardmäßig werden nur html-Elemente zum Generieren neuer BFCs verwendet, während die Standardelemente, bei denen hasLayout auf true gesetzt ist, nicht nur html-Elemente sind.
Darüber hinaus können wir das Attribut object.currentStyle.hasLayout verwenden, um festzustellen, ob für das Element die hasLayout-Funktion aktiviert ist.

An dieser Stelle sollten wir verstehen, dass Sie BFC verstehen müssen, um hasLayout zu verstehen. Hier können Sie sich also auf CSS Magic Hall: Reunderstanding Box Model, IFC, BFC and Collapsing Margins

Default Das Element `hasLayout==true`

<html>, <body><table>, <tr>, <th>, <td><img>,<hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet>,<marquee>

löst den Weg

`hasLayout==true`

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)

IE7 hat auch einige zusätzliche Attribute (keine vollständige Liste), die kann hasLayout auslösen:

min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed

Vorherige Versionen von IE6 (einschließlich des gemischten Modus von IE6 und allen nachfolgenden Versionen; tatsächlich entspricht dieser gemischte Modus in Bezug auf das Rendering dem IE 5.5), indem die Option ' „Breite“ eines beliebigen Elements oder „Höhe“ (nicht automatisch) kann hasLayout auslösen; es funktioniert jedoch nicht bei Inline-Elementen im Standardmodus von IE6 und IE7, sondern nur durch Festlegen von „display:inline-block“.

Durch das Übergeben von

oder display:inline-block oder min-width:0 wird die hasLayout-Funktion unwiderruflich aktiviert. Wenn keine anderen Eigenschaften hasLayout aktivieren, können Sie hasLayoutmin-height:0

max-width, max-height (设为 "none")(在IE7中)
position (设为 "static")
float (设为 "none")
overflow (设为 "visible") (在IE7中)
zoom (设为 "normal")
writing-mode (从 "tb-rl" 设为 "lr-t")

deaktivieren und die CSS-Eigenschaft eines neuen BFC auf folgende Weise generieren:

position:absolute/fixed
float:left/right
display:inline-block/table-cell/table-caption/flex/inline-flex
overflow:(除visible外任意值)

Sie können den Weg sehen um einen neuen BFC zu generieren und Die Möglichkeiten zum Auslösen von

überschneiden sich nicht vollständig. Daher kann davon ausgegangen werden, dass die durch hasLayout == true verursachten Probleme größtenteils durch die Generierung neuer BFCs an ungeeigneten oder unerwarteten Orten verursacht werden. hasLayout==true

Wie kann man kompatibel sein?

Das obige Problem kann nur vermieden werden, wenn ein Element in früheren Versionen von IE hasLayout auslöst und in anderen Browsern einen Blockformatierungskontext erstellt. Das heißt, aktivieren Sie beide oben genannten Optionen, um die Kompatibilität mit allen Browsern sicherzustellen, oder deaktivieren Sie umgekehrt beide.

Das Element generiert Blockformatierungskontext und löst hasLayout aus
1.1 Legen Sie das Element, das hasLayout auslöst, über CSS fest, um Blockformatierungskontext zu generieren;
1.2 Blockformatierungskontext generieren Lösen Sie jedoch keine hasLayout-Elemente aus, indem Sie „zoom:1“ festlegen, um hasLayout auszulösen.
bewirkt, dass das Element hasLayout nicht auslöst und keinen Blockformatierungskontext erstellt.

Zusammenfassung

Obwohl ich mich nicht mehr an IE5.5/6/7 anpassen muss, ist es dennoch notwendig, hasLayout zu verstehen. Tatsächlich kann man es so verstehen, dass man BFC aus einem anderen Blickwinkel lernt!

Respektieren Sie die Originalität, geben Sie bitte die Quelle für den Nachdruck an: http://www.cnblogs.com/fsjohnhuang/p/5291166.htmlFat John^_^

Danke

Reden Sie darüber Es BFC- und IE-spezifische Attribute hasLayout

RM8002: hasLayout kann in IE6 IE7 IE8(Q) nicht gleichzeitig ausgelöst werden und Elemente, die Blockformatierungskontext in anderen Browsern erstellen, verhalten sich in jedem Browser anders

Das obige ist der detaillierte Inhalt vonCSS Magic Hall: HasLayout sieht so aus!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Vollständige Erläuterung der Layoutattribute des Android-LayoutsNächster Artikel：Vollständige Erläuterung der Layoutattribute des Android-Layouts

In Verbindung stehende Artikel

Mehr sehen