Production de pages Web : résumé de 10 erreurs DIV+CSS courantes
Auteur：Eve Cole
Date de mise à jour：2009-06-12 17:53:00
1. Vérifiez s'il y a des fautes d'orthographe dans les éléments HTML et si la balise de fermeture est oubliée.
Même les utilisateurs expérimentés se trompent souvent lors de l'imbrication des divs. Vous pouvez utiliser la fonction de vérification de Dreamweaver pour rechercher les erreurs.
2. Vérifiez si le CSS est correct
Vérifiez les fautes d'orthographe, les } oubliés à la fin, etc. Vous pouvez utiliser CleanCSS pour vérifier les CSS pour les fautes d'orthographe. CleanCSS est un outil permettant de réduire le poids du CSS, mais il peut également vérifier les fautes d'orthographe.
3. Déterminez où l'erreur s'est produite
Si l'erreur affecte la présentation globale, vous pouvez supprimer les blocs div un par un jusqu'à ce que l'affichage revienne à la normale après la suppression d'un certain bloc div, et vous pouvez déterminer où l'erreur s'est produite.
4. Utilisez l'attribut border pour déterminer les caractéristiques de mise en page de l'élément d'erreur
L'utilisation de la disposition des attributs float peut provoquer des erreurs si vous ne faites pas attention. À ce stade, ajoutez l'attribut border à l'élément pour déterminer la limite de l'élément et la cause de l'erreur sera révélée.
5. L'élément parent d'un élément float ne peut pas spécifier l'attribut clear.
Sous MacIE, si vous utilisez l'attribut clear sur l'élément parent d'un élément float, la disposition des éléments float environnants sera chaotique. C'est un bug célèbre de MacIE Si vous ne le savez pas, vous ferez des détours.
6. L'élément float doit spécifier l'attribut width
De nombreux navigateurs ont des bugs lors de l'affichage d'éléments flottants avec une largeur non spécifiée. Ainsi, quel que soit le contenu de l'élément float, l'attribut width doit être spécifié pour celui-ci.
De plus, essayez d'utiliser em au lieu de px comme unité lors de la spécification des éléments.
7. Les éléments float ne peuvent pas spécifier d'attributs tels que la marge et le remplissage.
IE a un bug lors de l'affichage des éléments float avec une marge et un remplissage spécifiés. Par conséquent, ne spécifiez pas les attributs margin et padding sur les éléments float (vous pouvez imbriquer un div à l'intérieur de l'élément float pour définir la marge et le padding). Vous pouvez également utiliser des hacks pour spécifier des valeurs extraordinaires pour IE.
8. La somme des largeurs des éléments flottants doit être inférieure à 100 %
Si la somme des largeurs des éléments float est exactement de 100 %, certains anciens navigateurs ne l'afficheront pas correctement. Par conséquent, veillez à ce que la somme des largeurs soit inférieure à 99 %.
9. Avez-vous réinitialisé le style par défaut ?
Certains attributs, tels que margin, padding, etc., seront interprétés différemment selon les navigateurs. Par conséquent, il est préférable de définir toutes les marges et tous les remplissages sur 0, le style de liste sur aucun, etc. avant le développement.
10. Avez-vous oublié d'écrire une DTD ?
Si les résultats d'affichage des différents navigateurs sont toujours différents quelle que soit la façon dont vous les ajustez, vous pouvez vérifier si vous avez oublié d'écrire la ligne suivante de DTD au début de la page :
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//FR" " http://www.w3.org/TR/html4/loose.dtd "＞
