Compréhension approfondie du haslayout CSS

Pour mieux comprendre le CSS, en particulier le rendu du CSS sous IE, haslayout est un concept qui doit être bien compris. La plupart des erreurs d'affichage sous IE sont causées par haslayout.

Qu'est-ce que haslayout ?
Haslayout est un composant interne du moteur de rendu Windows Internet Explorer. Dans Internet Explorer, un élément calcule la taille et organise son propre contenu ou s'appuie sur un élément parent pour calculer la taille et organiser le contenu. Afin de concilier ces deux concepts différents, le moteur de rendu utilise l'attribut hasLayout, qui peut être vrai ou faux. Lorsque la valeur de l'attribut hasLayout d'un élément est vraie, nous disons que l'élément a une mise en page
Lorsqu'un élément a une mise en page, il est responsable du calcul de la taille et du positionnement de lui-même et des éventuels éléments descendants. En termes simples, cela signifie que l'élément doit passer plus de temps à se maintenir lui-même et à maintenir son contenu, plutôt que de s'appuyer sur des éléments ancêtres pour effectuer ce travail. Ainsi, certains éléments auront une disposition par défaut. Lorsque nous disons qu'un élément « a une mise en page » ou « obtient une mise en page », ou qu'un élément « a une mise en page », nous voulons dire que sa propriété spécifique à Microsoft hasLayout est définie sur true. Un « élément de mise en page » peut être un élément qui a une mise en page par défaut ou un élément qui a une mise en page en définissant certaines propriétés CSS. Si un élément HTML a l'attribut haslayout, alors la valeur de haslayout de cet élément doit être uniquement vraie. haslayout est un attribut en lecture seule, une fois déclenché, il est irréversible. Vous pouvez vérifier si les éléments HTML sous IE ont haslayout via la barre d'outils du développeur IE. Sous la barre d'outils du développeur IE, les éléments avec haslayout sont généralement affichés sous la forme "haslayout = -1".
Les éléments chargés d'organiser leur propre contenu auront une mise en page par défaut, qui comprend principalement les éléments suivants (pas une liste complète) :
* body et html
* table, tr, th, td
* img
* hr
* entrée, bouton, fichier, sélection, zone de texte, champset
* chapiteau
* frameset, frame, iframe
* objets, applets, intégration
Pour tous les éléments, il n'existe pas de mise en page par défaut, et la principale raison invoquée par Microsoft est "la performance et la simplicité". Si tous les éléments étaient présentés par défaut, cela aurait un impact néfaste sur les performances et l'utilisation de la mémoire.
Comment activer haslayout ?
La plupart des erreurs d'affichage d'IE peuvent être corrigées en activant l'attribut haslayout de l'élément. Vous pouvez activer le haslayout de l'élément en définissant l'attribut CSS size (largeur/hauteur), etc., afin qu'il « ait une disposition ». Définissez simplement les propriétés CSS suivantes comme indiqué ci-dessous.
* display : inline-block
* height : (n'importe quelle valeur sauf auto)
* float : (gauche ou droite)
* position : absolue
* width : (n'importe quelle valeur sauf auto )
　* writing-mode : tb-rl
　* zoom : (n'importe quelle valeur sauf normale)
　Internet Explorer 7 a quelques propriétés supplémentaires (liste non complète) :
* min-height : (n'importe quelle valeur)
* max-height : (n'importe quelle valeur sauf aucune)
* min-width : (n'importe quelle valeur)
* max-width : (n'importe quelle valeur sauf aucune)
* overflow : (n'importe quelle valeur sauf visible)
* overflow-x : (n'importe quelle valeur sauf visible)
* overflow-y : (n'importe quelle valeur sauf visible)
* position : fixe
Où overflow-x et overflow-y sont des attributs du modèle de boîte CSS3, qui ne sont pas encore largement pris en charge par les navigateurs.
　Pour l'élément en ligne (la valeur par défaut est un élément en ligne, tel que span, ou un élément avec display:inline;),
　la largeur et la hauteur ne sont disponibles que sous IE5.x et IE6 ou HasLayout plus récent est déclenché en mode bizarreries de la version. Pour IE6, si le navigateur s'exécute en mode de compatibilité standard, les éléments en ligne ignoreront les attributs width ou height, donc la définition de width ou height ne peut pas ordonner à l'élément d'avoir une disposition dans ce cas.
le zoom peut toujours déclencher hasLayout, mais il n'est pas pris en charge dans IE5.0.
Si un élément avec "layout" affiche : inline en même temps, son comportement est très similaire au inline-block mentionné dans la norme : il est disposé horizontalement et de manière continue dans le paragraphe comme un texte ordinaire, sous réserve de alignement vertical affecte, et la taille peut être ajustée de manière adaptative en fonction du contenu. Cela peut également expliquer pourquoi dans IE/Win seul, les éléments en ligne peuvent contenir des éléments de niveau bloc avec moins de problèmes, car dans d'autres navigateurs, display: inline signifie en ligne, contrairement à IE/Win, une fois que l'élément en ligne a une mise en page, il a toujours une mise en page. Deviendra un bloc en ligne.
Débogage et résolution des problèmes de haslayout
Lorsqu'une page Web se comporte anormalement dans IE, vous pouvez essayer d'activer haslayout pour voir si le problème réside. Une méthode courante consiste à définir zoom:1 sur le CSS d'un élément. Zoom:1 est utilisé car dans la plupart des cas, il déclenche la disposition haslayout de l'élément sans affecter l'environnement existant. Une fois le problème disparu, on peut essentiellement déterminer qu'il est à l'origine du haslayout. Ensuite, vous pouvez corriger ce problème en définissant les propriétés CSS correspondantes. Il est recommandé que la première chose à considérer soit de définir les attributs largeur/hauteur de l'élément, puis de considérer d'autres attributs.
Pour IE6 et les versions antérieures, la méthode courante s'appelle Holly hack, qui consiste à définir la hauteur de cet élément à 1% (hauteur : 1% ;). Il convient de noter que cette méthode ne fonctionnera pas lorsque la propriété overflow de cet élément est définie sur visible. Ou utilisez les commentaires conditionnels d'IE.
Pour IE7, le meilleur moyen est de définir la hauteur minimale de l'élément à 0 (min-height:0;).
Bugs courants causés par des problèmes de haslayout
Bug flottant à double marge dans IE6 et versions inférieures
Correction de bug : display:inline
Bug de décalage de 3 pixels dans IE5-6/win
Correction de bug : _hauteur : 1 % ;
Bug du coucou E6
Correction d'un bug : _hauteur : 1 % ;

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!