Heim > Artikel > Web-Frontend > CSS Magic Hall: HasLayout sieht so aus!
CSS Magic Hall: HasLayout sieht so aus!
- 巴扎黑Original
- 2017-06-28 11:13:041198Durchsuche
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: fixedVorherige 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
- 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.
Respektieren Sie die Originalität, geben Sie bitte die Quelle für den Nachdruck an: http://www.cnblogs.com/fsjohnhuang/p/5291166.htmlFat John^_^
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!