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.
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
hasLayout==true
<html>, <body><table>, <tr>, <th>, <td><img>,<hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet>,<marquee>
hasLayout==truedisplay: inline-block height: (除 auto 外任何值) width: (除 auto 外任何值) float: (left 或 right) position: absolute writing-mode: tb-rl zoom: (除 normal 外任意值)
min-height: (任意值) min-width: (任意值) max-height: (除 none 外任意值) max-width: (除 none 外任意值) overflow: (除 visible 外任意值，仅用于块级元素) overflow-x: (除 visible 外任意值，仅用于块级元素) overflow-y: (除 visible 外任意值，仅用于块级元素) position: fixed
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")
position:absolute/fixed float:left/right display:inline-block/table-cell/table-caption/flex/inline-flex overflow:(除visible外任意值)
ü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
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.
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
