Bugs en CSS que vous devez connaître et comment les corriger

Comparé à de nombreux langages de programmation, CSS est un langage assez facile à apprendre. Sa syntaxe est simple et claire, et grâce à sa nature expressive, les développeurs n'ont pas besoin de gérer une logique complexe. Cependant, des difficultés surviennent lors du test du code dans différents navigateurs. La raison pour laquelle les bogues du navigateur sont affichés de différentes manières est un problème majeur auquel sont confrontés la plupart des développeurs CSS. Votre conception peut paraître superbe dans un navigateur, mais la mise en page peut paraître cassée dans un autre.

Le malentendu selon lequel "le CSS est difficile à contrôler" ne vient pas du langage lui-même, mais d'une série de mesures nécessaires pour que le site fonctionne correctement sur tous les principaux navigateurs. Ci-dessous, nous expliquerons quelques situations de bugs.

1. Comment détecter les bugs

Nous savons tous que les navigateurs ont des bugs, et certains navigateurs ont plus de bugs que d'autres. Lorsque les développeurs CSS rencontrent des problèmes dans leur propre code, certaines personnes imputent l'erreur aux bogues du navigateur et prennent les mesures appropriées. En fait, tout le monde exagère les bugs, et les bugs ne sont pas aussi courants qu’on le dit. Les problèmes CSS les plus courants ne proviennent pas de bugs du navigateur, mais d’une compréhension incomplète des spécifications CSS.

De nombreux développeurs sont autodidactes et construisent leurs propres modèles mentaux des effets. Lorsque quelque chose ne répond pas à leurs attentes, le navigateur est le coupable. Afin d'éviter ce problème, lorsqu'il s'agit de bugs CSS, il est préférable de supposer que vous avez fait une erreur quelque part, de vérifier le code avec des doutes sur vous-même et d'examiner chaque code de cette façon, vous pourrez naturellement le trouver. sur vos erreurs de syntaxe. Amélioration continue. Lorsque vous ne parvenez vraiment pas à le trouver, demandez-vous s’il s’agit d’un bug du navigateur.

Problèmes CSS courants

Certains des problèmes CSS les plus simples sont causés par des erreurs de frappe et de syntaxe dans le code. La meilleure façon d'éviter ce bug est d'exécuter votre code via un validateur CSS (ttp://jigsaw.w3.org/css-validator/). Cela devrait trouver toutes les erreurs de syntaxe et vous montrer la ligne et une brève description de chaque erreur.

Mais rappelez-vous également que le vérificateur n'est qu'un outil de vérification automatique et n'est pas totalement fiable. Il peut signaler des erreurs qui vous stupéfient, ce qui est également un bug du vérificateur, mais vous devriez être en mesure de savoir si les erreurs qu'il signale sont de véritables erreurs.

1. Problèmes de spécificité et d'ordre de classification

En plus des erreurs grammaticales, l'un des problèmes les plus courants est la conception de la spécificité et de l'ordre de classification. Il y a souvent un problème de spécificité lorsque vous appliquez une règle à un élément et constatez qu'elle n'a aucun effet. D'autres règles peuvent être appliquées et fonctionnent bien, mais certaines règles ne fonctionnent tout simplement pas, ce qui est ennuyeux. Par exemple :

Je souhaite que le code suivant s'affiche en orange, mais il a été écrit à l'origine pour être transparent, utilisez donc la règle :

#content p{background-color:transparent;}
.intro{background-color:#feeca9}

Lors des tests dans le navigateur, c'est toujours Affichage transparent. En effet, la sélection du contenu p est plus spécifique que le sélecteur de intor. Dans ce cas, la meilleure façon de gérer ce problème est d'ajouter l'identifiant de l'élément de contenu au début du sélecteur de paragraphe intor :

#content p{background-color: transparent;}
#content .intro{background-color: #feeca9;}

J'écris ceci maintenant, j'ai envie de sortir un moment.

Nous avons fini de parler des « questions de particularité et d'ordre de classification » dans le chapitre précédent, commençons maintenant à parler de

2. La question des bords vierges qui se chevauchent

.

La superposition Blank Edge est une autre particularité CSS qui peut causer beaucoup de problèmes si elle est mal comprise. Prenons un exemple :

<p id="box">
<p>This paragraph has a 20px margin.</p>
</p>

La p box est paramétrée avec une marge de 10 pixels

#box{margin:10px;background-color:#d5d5d5;}
p{margin:20px;background-color:#6699ff;}

De cette façon, votre marge p idéale doit être de 10 pixels et la balise p A Une marge de 20 pixels est générée. En fait, seule la marge de 10 pixels de p est générée. La balise p n'apparaît que sur les côtés gauche et droit. Il y a une marge de 20 pixels, mais aucune marge n'est générée en haut et en haut. bas de p.

Cela est dû à deux raisons. Premièrement, les 20 pixels des marges supérieure et inférieure du paragraphe se chevauchent avec les 10 pixels du p, formant une seule marge verticale de 20 pixels. Deuxièmement, ces bords vierges ne sont pas entourés par p, mais dépassent des bords supérieur et inférieur de p. Cela se produit parce que la hauteur de l'élément enfant est calculée par l'élément. Si un élément n'a pas de bordure verticale ni de remplissage, sa hauteur est la distance entre les bords de bordure supérieur et inférieur des éléments enfants qu'il contient. Par conséquent, les marges supérieure et inférieure de l’élément enfant conteneur dépassent à l’extérieur de l’élément conteneur. Il existe cependant une solution simple. En ajoutant une bordure verticale ou un remplissage, les espaces ne se chevauchent plus et la hauteur de l'élément est la distance entre les bords d'espaces supérieur et inférieur de ses enfants contenant. Le code est le suivant :

#box{margin:10px;padding:1px;background-color:#d5d5d5;}
p{margin:20px;background-color:#6699ff;}

ok Le problème est résolu. Dans le prochain chapitre, je parlerai des connaissances de base de la capture de bugs.

2. Problèmes d'isolation des bogues

       接下来需要尝试隔离问题。通过隔离问题和识别症状，有可能查明是什么导致了这个问题并修复它。隔离问题的一种方法是在相关的元素上应用边框或轮廓，看看它们的反应：

1 #promo1
 2 {
 3 float:left;
 4 margin-right:5px;
 5 border:1px solid red;
 6 }
 7 #promo2
 8 {
 9 float:left;
10 border:1px solid green;
11 }

      （我一般喜欢把边框直接在也页面添中加，这样善后处理的话就比较好处理）可以使用firefox开发人员工具条插件中的轮廓选项，或者使用用来给不同元素加轮廓的bookmarklet之一。有时候，仅仅添加边框就会修复问题，这往往就说明这个就是空白边叠加的问题。

       尝试修改几个属性后，看看它们是否影响bug，如果有影响，那么是哪一个元素，那一个样式产生的影响找到这个元素，就ok了。例如，如果在两个框架之间的间隙在IE中比你想想的大，那么加大空白边，来测试，看一下会有什么变化。如果边框之间的间隙加倍了，那么可能是遇到了IE的双空白边浮动bug。

 1  #promo1
 2   {
 3  float:left;
 4  margin-right:40px;
 5  border:1px solid red;
 6  }
 7  #promo2
 8  {
 9  float:left;
10  border:1px solid green;
11  }

       尝试一些常见的解决方案。例如，将position属性设置为relatively、将display属性设置为inline（在浮动元素上）或者设置宽度或者高度的属性，让它增高或者缩短，都可以修复许多IE bug。这样的话你就可以找到很多css问题，从而达到对其了解和修复它们！

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!