Conseils courants de prévention des erreurs lors de la conception de pages Web avec CSS (Collection)

Le contenu de cet article concerne les techniques courantes de prévention des erreurs (collection) lors de la conception de pages Web avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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 vétérans font souvent des erreurs dans la relation d'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 s'il y a des fautes d'orthographe, si vous avez oublié la terminaison }, 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 l'emplacement où l'erreur s'est produite

Si l'erreur affecte la disposition globale, vous pouvez supprimer les blocs div un par un jusqu'à ce que l'affichage revienne à la normale après avoir supprimé un certain bloc div, 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 l'attribut float pour la mise en page peut provoquer des erreurs accidentellement. À 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

Si l'attribut clear est utilisé sur l'élément parent d'un élément float sous MacIE, la disposition des éléments float environnants sera confus. C'est un bug célèbre de MacIE Si vous ne le savez pas, vous ferez des détours.

6. Notez que les éléments float doivent spécifier l'attribut width

De nombreux navigateurs ont des bugs lors de l'affichage des éléments float sans largeur 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. Notez que les éléments flottants 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 flottants 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. Assurez-vous que la somme des largeurs des éléments float est inférieure à 100 %

Si la somme des largeurs des éléments float est exactement de 100 %, certains anciens navigateurs ne s'afficheront pas correctement. . Par conséquent, veillez à ce que la somme des largeurs soit inférieure à 99 %.

9. Vérifiez si le style par défaut a été réinitialisé.

Certains attributs tels que la marge, le remplissage, etc., seront interprétés différemment par différents 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. Vérifiez si vous avez oublié d'écrire la DTD

Si les résultats d'affichage des différents navigateurs sont toujours différents, quelle que soit la façon dont vous l'ajustez, vous pouvez vérifier si vous avez oublié d'écrire ce qui suit. ligne de DTD en début de page :

< DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TransITional//EN" "http://www.w3.org/TR/ html4/loose.dtd" >

Ce qui précède est une introduction aux techniques courantes de prévention des erreurs lors de la conception de pages Web avec CSS. Si vous souhaitez en savoir plus sur le Tutoriel CSS3, veuillez faire attention sur le site Web PHP chinois.

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!