Maison > Article > interface Web > CSS Magic Hall : HasLayout s'avère être comme ça !
CSS Magic Hall : HasLayout s'avère être comme ça !
- 巴扎黑original
- 2017-06-28 11:13:041144parcourir
Avant-propos
J'ai toujours entendu dire que de nombreux bugs étranges dans les anciennes versions d'IE sont causés par un personnage mystérieux, à savoir hasLayout. Profitant de la récente nervosité soudaine, j'ai l'intention de bien apprendre le CSS et de répondre aux doutes que j'ai depuis de nombreuses années.
Qui est hasLayout ?
hasLayout peut être simplement considéré comme le BFC (Block Formatting Context) dans IE5.5/6/7. C'est-à-dire qu'un élément organise et calcule lui-même son propre contenu (c'est-à-dire qu'il définit sa propre largeur et hauteur via largeur/hauteur), ou que son bloc conteneur organise et calcule sa taille. Quant à IFC (c'est-à-dire qu'il n'a pas de mise en page), l'élément ne peut pas organiser et calculer la taille de son propre contenu, mais son propre contenu détermine sa taille (c'est-à-dire qu'il ne peut transmettre que line-height Définissez l'espacement des lignes du contenu et utilisez l'espacement des lignes pour prendre en charge la hauteur de l'élément ; vous ne pouvez pas définir la largeur de l'élément sur la largeur, cela ne peut être déterminé que par le contenu)
Quand hasLayout est vrai (c'est ce qu'on appelle "propre mise en page"), ce qui équivaut à l'élément générant un nouveau BFC, et que l'élément lui-même organise et calcule la taille de son propre contenu
Quand hasLayout est faux ; (ce qu'on appelle "n'a pas de mise en page"), cela équivaut à l'élément ne générant pas de nouveau BFC, et l'élément est déterminé par son bloc conteneur auquel il appartient effectue des calculs d'organisation et de taille.
Semblable à la fonctionnalité qui génère un nouveau BFC, hasLayout ne peut pas être défini directement via les propriétés CSS. Au lieu de cela, cette fonctionnalité est activée indirectement via certaines propriétés CSS. La différence est que certaines propriétés CSS transforment indirectement hasLayout en true de manière irréversible. Et par défaut, seuls les éléments html sont utilisés pour générer de nouveaux BFC, tandis que les éléments par défaut avec hasLayout défini sur true ne sont pas uniquement des éléments html.
De plus, nous pouvons utiliser l'attribut object.currentStyle.hasLayout pour déterminer si la fonctionnalité hasLayout est activée sur l'élément.
À ce stade, nous devons comprendre que pour comprendre hasLayout, nous devons comprendre BFC, vous pouvez donc vous référer ici à CSS Magic Hall : Re-compréhension du modèle de boîte, IFC, BFC et marges d'effondrement
Par défauthasLayout==true L'élément
<html>, <body><table>, <tr>, <th>, <td><img>,<hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet>,<marquee>
déclenche la façon dont hasLayout==true
display: inline-block height: (除 auto 外任何值) width: (除 auto 外任何值) float: (left 或 right) position: absolute writing-mode: tb-rl zoom: (除 normal 外任意值)
IE7 a également quelques attributs supplémentaires (pas une liste complète ) qui peut déclencher hasLayout :
min-height: (任意值) min-width: (任意值) max-height: (除 none 外任意值) max-width: (除 none 外任意值) overflow: (除 visible 外任意值，仅用于块级元素) overflow-x: (除 visible 外任意值，仅用于块级元素) overflow-y: (除 visible 外任意值，仅用于块级元素) position: fixed
Versions précédentes d'IE6 (y compris le mode mixte d'IE6 et toutes les versions ultérieures, en fait, ce mode mixte est équivalent à IE 5.5 en termes de rendu), en définissant la « largeur » de n'importe quel élément ou la « hauteur » (non automatique) peut déclencher hasLayout ; mais cela ne fonctionne pas sur les éléments en ligne dans le mode standard d'IE6 et IE7, uniquement en définissant « display:inline-block ».
Passer display:inline-block ou min-width:0 ou min-height:0 activera de manière irréversible la fonctionnalité hasLayout. Lorsqu'aucune autre propriété n'active hasLayout, hasLayout peut être désactivé de la manière suivante
max-width, max-height (设为 "none")(在IE7中) position (设为 "static") float (设为 "none") overflow (设为 "visible") (在IE7中) zoom (设为 "normal") writing-mode (从 "tb-rl" 设为 "lr-t")
et les propriétés CSS d'un nouveau BFC
position:absolute/fixed float:left/right display:inline-block/table-cell/table-caption/flex/inline-flex overflow:(除visible外任意值)
peuvent être vues. hasLayout==true ne se chevauchent pas complètement. Par conséquent, les problèmes causés par hasLayout==true peuvent être largement compris comme étant causés par la génération de nouveaux BFC dans des endroits inappropriés ou inattendus.
Comment être compatible ?
Le problème ci-dessus ne peut être évité que si un élément déclenche hasLayout dans les versions antérieures d'IE et crée un contexte de formatage de bloc dans d'autres navigateurs. Autrement dit, activez les deux éléments ci-dessus pour garantir la compatibilité entre les navigateurs, ou inversement, désactivez les deux.
L'élément génère un contexte de formatage de bloc et déclenche hasLayout
1.1 Pour l'élément qui déclenche hasLayout, définissez-le via CSS pour générer un contexte de formatage de bloc ;
1.2 Générer un contexte de formatage de bloc mais ne déclenchez pas les éléments hasLayout en définissant « zoom:1 » pour déclencher hasLayout.empêche l'élément de déclencher hasLayout et de ne pas créer de contexte de formatage de bloc.
Résumé
Bien que je n'aie plus besoin de m'adapter à IE5.5/6/7, il faut quand même comprendre hasLayout. En fait, cela peut être compris comme un apprentissage du BFC sous un autre angle !
Respectez l'originalité, veuillez indiquer la source de la réimpression : http://www.cnblogs.com/fsjohnhuang/p/5291166.htmlFat John^_^
Merci
Parlez de il Attributs spécifiques à BFC et IE hasLayout
RM8002 : hasLayout ne peut pas être déclenché dans IE6 IE7 IE8(Q) en même temps et les éléments qui créent un contexte de formatage de bloc dans d'autres navigateurs se comporteront différemment dans chaque navigateur
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!