La compatibilité des navigateurs a toujours été un problème courant dans la mise en page CSS, et les débutants ont rencontré de nombreux malentendus à cause de cela. Grâce à mon expérience, j'ai résumé 2 méthodes pour éviter la plupart des problèmes de compatibilité des navigateurs.
Ces deux méthodes présentent les avantages suivants :
1. Pas besoin d'utiliser HACK
2. Simple et efficace, vous pouvez le comprendre en un coup d'œil
3. Disposition hiérarchique et modulaire
4. Le code est plus raisonnable et plus facile à identifier
Méthode 1 : Résoudre le désalignement flottant provoqué par l'ajout d'un espacement interne et externe
Nous devons généralement utiliser float pour faire flotter les DIV dans des mises en page multi-colonnes. Habituellement, nous écrirons 3 DIV pour une mise en page à 3 colonnes. Nous espérons obtenir les effets suivants :
.gif)
Afin d'obtenir cet effet, nous ajouterons une marge pour permettre à la colonne d'être directement espacée, et ajouterons également une bordure, ainsi qu'un remplissage pour empêcher le texte à l'intérieur de coller à la bordure. Mais quelque chose d’inattendu s’est produit. Après l’écriture du code, la situation suivante s’est produite :
.gif)
La troisième colonne se trouvait ci-dessous. Ce n'est pas l'effet souhaité. Alors analysons-le. Suivez l'idée générale. La largeur totale est de 800 px, 200 px pour la colonne de gauche, 400 px pour la colonne du milieu et 200 px pour la colonne de droite. Cela semble bien, mais il doit y avoir un espace entre ces colonnes, vous devez donc le modifier : 190 px pour la colonne de droite. colonne de gauche, 400 px pour la colonne du milieu et 190 px pour la colonne de droite.
Mais pour le rendre plus beau, vous ajoutez une bordure. Mais j'ai oublié que la bordure augmentera également la largeur. De plus, vous avez augmenté le remplissage de la colonne : 10px ; je suis confus, donc la largeur réelle devient : colonne de gauche : largeur 200-espacement extérieur 10-espacement intérieur 20-bordure. 2=168 , afin qu'il n'y ait pas de désalignement. Mais ne pensez-vous pas que c’est un peu compliqué ? Peut-être avez-vous besoin d’une calculatrice. Il y aura des différences dans l'affichage de certains navigateurs avec cette disposition.
Bon, parlons de ma méthode. Selon la division hiérarchique, je sépare la mise en page et l'affichage. La mise en page signifie qu'en plus de la largeur et du flottement, la mise en page ajoute au plus un espacement extérieur, afin qu'il soit plus facile pour moi de calculer. Ensuite, nous ajoutons un autre DIV à la colonne de mise en page spécifiquement pour afficher les bordures, l'espacement interne et externe, etc. Vous n'avez pas besoin de définir la largeur, adaptez-la simplement. Afin de faciliter votre mémorisation, j'ai improvisé un poème : la largeur fixe doit être flottante, sans bordures ni patchs, mettez un DIV à l'intérieur, et le style défini fonctionnera !
Méthode 2 : Résoudre le problème des éléments flottants internes qui se détachent de la couche externe
Afin de réaliser un catalogue de produits ou un album photo, nous utilisons des DIV UL ou N pour flotter. L'effet recherché est le suivant :
.gif)
Mais cela s'est retourné contre nous. Récemment, l'affichage ressemble à ceci, et la bordure extérieure s'est déplacée vers le haut :
.gif)
La solution à ce problème est en réalité très simple.
1. Vous pouvez ajouter un float:left; à la couche externe pour résoudre le problème.
2. Une autre méthode consiste à placer un DIV à la fin pour effacer le flotteur une fois le flotteur terminé.
3. Ajoutez de la hauteur ou de la largeur à la couche externe.