L'élément <html>, l'élément racine du document XHTML, est très familier. Cependant, j'ai essayé de faire une disposition récemment et j'ai constaté que dans IE, ce n'est pas un rôle si simple et a des propriétés très spéciales. Résumons-le pour référence:
Mode standard IE6:◎ Peu importe la hauteur et la largeur pour lui, sa taille remplit toujours toute la zone d'observation.
◎ Peu importe le type de rembourrage et de bordure pour lui, la taille et la taille remplissent toujours toute la zone d'observation.
◎ La marge sera ignorée.
◎ Bloc de contenu initial est la largeur de bordure de la zone de vue rectangulaire moins <html>
En utilisant CSS3 pour l'exprimer, nous pouvons considérer <html> dans IE6 comme un élément spécial de hauteur: 100%; Largeur: 100%; Dimensionnement en boîte: Border-Box; Et ces attributs sont immuables.
Mode standard IE7:Bien que IE7 ait corrigé plusieurs bogues CSS dans IE6, la compréhension de <html> est beaucoup plus compliquée que IE6. Bien que IE6 soit bizarre, il y a peu d'attributs qui peuvent être modifiés, donc c'est toujours simple. Le <html> d'IE7 peut accepter plus d'attributs, mais l'algorithme ne suit pas les spécifications et est honnête, il est donc beaucoup plus difficile de le comprendre que IE6.
Le premier est la fonction d'extension automatique.
L'élément <html> est plus simple dans la direction Y, similaire à la compréhension d'IE6 de la hauteur de l'élément normal - si la hauteur du contenu dépasse la hauteur de <html>, ou si le <html> n'a pas de hauteur fixe (c'est-à-dire la valeur par défaut), alors <html> étendra automatiquement sa propre hauteur pour inclure le contenu.
Mais dans la direction X, le problème se concentre principalement sur la compréhension de la largeur de <body>. Voici deux situations: (N'a-t-elle pas dit <html>? Pourquoi avez-vous parlé de la largeur de <body>? Parce que si <html> veut se développer automatiquement, vous devez savoir à quel point le <body> est de se développer.)
Le premier cas: si la largeur de <html> est toutes les valeurs autres que les valeurs non 0 (y compris la valeur par défaut automatique), la largeur de <body> est déterminée par les règles suivantes:
1. Si la largeur de <body> est une valeur fixe, il y a tellement de largeur.
2. Si la largeur de <body> est la valeur par défaut automatique, la largeur remplira l'espace de contenu de <html>.
3. Si <body> lui-même a des caractéristiques de rétrécissement et environnantes, telles que la position de réglage: absolue ou affichage: en ligne (étrangement, le flotteur ne satisfait pas à cet élément, il satisfait 2), alors cela dépend de la largeur du contenu.
Le deuxième cas: si la largeur de <html> est 0, alors les 1er et 3e points sont les mêmes que ci-dessus, et le 2ème point, s'il y a une large valeur par défaut, la largeur s'adaptera au contenu, mais qu'il y a un phénomène étrange, c'est-à-dire que le <corps a une frontière ou une plate-forme qui ne sera pas 0 en même temps, sa largeur Premier cas - un espace de contenu plein de <html>. Étant donné que la largeur de <html> est 0 pour le moment, la largeur de <body> s'effondre également à 0.
Deuxièmement, les réglages de largeur et de hauteur de <html> affecteront étrangement la référence en pourcentage de <body> (ou le bloc contenant de <body>).
Dans la direction Y, si la hauteur de <html> est la valeur par défaut automatique, la hauteur de <body> sera ignorée si elle prend une valeur pour pourcentage. Mais une fois que la valeur de hauteur de <html> a une hauteur spécifique, même si elle est de 0, la hauteur de pourcentage de <body> sera appliquée. Mais ce qui est étrange, c'est que la référence de calcul pour ce pourcentage de hauteur n'est pas la hauteur du <html> juste défini, mais la somme de la marge + bordure + des hauteurs de rembourrage de la hauteur de la zone de visualisation moins <html>.
Dans la direction X, si la largeur prend la valeur par défaut automatique et que la largeur du pourcentage de <body> ne sera pas ignorée, mais sa référence de calcul est toujours aussi étrange que la direction Y, soustrayant la somme de la marge + bordure + largeur de rembourrage de <HTML> pour la largeur de la vue. Si la largeur a une valeur spécifique, elle sera remplacée en pourcentage de référence de largeur pour <body>.
Encore une fois, lorsque <body> est réglé en position: Absolu, la couleur bordure de <html> sera invalide. C'est un autre bug étrange.
Enfin, le bloc contenant initial adopte un rectangle de la fenêtre, ce qui est fondamentalement normal. Mais il est impossible de créer un bloc contenant avec des éléments absolument positionnés. Mais peut-être que le bloc contenant créé par <html> est le rectangle de la fenêtre, qui sait.
C'est tellement désordonné. Ce n'est pas seulement une grosse tête mais aussi une grosse tête après l'avoir réglé. Je ne sais pas si vous pouvez le voir clairement après avoir regardé en arrière à l'avenir. IE7 ah ie7 ... ce n'est pas facile de dire que vous aimer ...
Ie5 et modes de bizarrerie◎ <html> et <body> Tous les réglages de largeur et de hauteur sont ignorés et restent pleins de fenêtres.
◎ <html> Le rembourrage et la marge ne sont pas acceptés.
◎ <body> accepter le rembourrage et la marge, mais la marge négative n'a pas d'effet visuel, mais sera amené lors du calcul des autres paramètres correspondants.
La frontière, l'arrière-plan et les autres attributs de <Body> seront transférés vers le haut vers l'élément <html>.
◎ Bloc de contenu initial est le bord de rembourrage de <body>.
utilitéCe résumé est dérivé du problème de mise en page au début. Le problème de mise en page est l'une de ses utilisations. Je vais réécrire un post pour le régler plus tard. Mais cette disposition utilise uniquement quelques fonctionnalités, et il devrait y avoir plus de potentiel pour les exploiter, alors étudiez-le lentement.