Fehler in CSS, die Sie kennen müssen und wie Sie sie beheben können

Im Vergleich zu vielen Programmiersprachen ist CSS eine relativ einfach zu erlernende Sprache. Seine Syntax ist einfach und klar, und aufgrund seiner ausdrucksstarken Natur müssen sich Entwickler nicht mit komplexer Logik auseinandersetzen. Beim Testen von Code in verschiedenen Browsern treten jedoch Schwierigkeiten auf. Warum Browserfehler auf unterschiedliche Weise angezeigt werden, ist für die meisten CSS-Entwickler ein großes Problem. Ihr Design sieht in einem Browser möglicherweise großartig aus, in einem anderen kann das Layout jedoch auseinanderfallen.

Das Missverständnis, dass „CSS schwer zu kontrollieren ist“, liegt nicht an der Sprache selbst, sondern an einer Reihe notwendiger Maßnahmen, damit die Website auf allen gängigen Browsern ordnungsgemäß funktioniert. Nachfolgend erläutern wir einige Fehlersituationen.

1. Wie man Fehler erkennt

Wir alle wissen, dass Browser Fehler haben, und einige Browser haben mehr Fehler als andere. Wenn CSS-Entwickler in ihrem eigenen Code auf Probleme stoßen, geben manche Leute Browserfehlern die Schuld für den Fehler und ergreifen entsprechende Maßnahmen. Tatsächlich übertreibt jeder Fehler, und Fehler sind nicht so häufig, wie die Leute sagen. Die häufigsten CSS-Probleme sind nicht auf Browserfehler zurückzuführen, sondern auf ein unvollständiges Verständnis der CSS-Spezifikationen.

Viele Entwickler sind Autodidakten und bauen ihre eigenen mentalen Modelle der Effekte auf. Wenn etwas nicht ihren Erwartungen entspricht, geben sie den Browser als Schuldigen an. Um dieses Problem zu vermeiden, gehen Sie beim Umgang mit CSS-Fehlern am besten davon aus, dass Sie irgendwo einen Fehler gemacht haben, überprüfen Sie den Code und prüfen Sie jeden Code. Auf diese Weise können Sie ihn natürlich finden Beheben Sie Ihre Syntaxfehler. Wenn Sie es wirklich nicht finden können, überlegen Sie, ob es sich um einen Browserfehler handelt.

Häufige CSS-Probleme

Einige der einfachsten CSS-Probleme werden durch Tipp- und Syntaxfehler im Code verursacht. Der beste Weg, diesen Fehler zu verhindern, besteht darin, Ihren Code durch einen CSS-Validator laufen zu lassen (ttp://jigsaw.w3.org/css-validator/). Dies sollte alle Syntaxfehler finden und Ihnen die Zeile und eine kurze Beschreibung jedes Fehlers anzeigen.

Denken Sie aber auch daran, dass der Checker nur ein automatisches Prüftool ist und nicht völlig zuverlässig. Es kann Fehler melden, die Sie verblüffen, was ebenfalls ein Fehler des Prüfers ist, aber Sie sollten in der Lage sein, zu erkennen, ob es sich bei den gemeldeten Fehlern um echte Fehler handelt.

1. Probleme mit der Spezifität und der Klassifizierungsreihenfolge

Neben grammatikalischen Fehlern ist eines der häufigsten Probleme die Gestaltung der Spezifität und der Klassifizierungsreihenfolge. Oft liegt ein Spezifitätsproblem vor, wenn Sie eine Regel auf ein Element anwenden und feststellen, dass diese keine Auswirkung hat. Andere Regeln können angewendet werden und funktionieren gut, aber einige Regeln funktionieren einfach nicht, was sehr ärgerlich ist. Beispiel:

Ich möchte, dass der folgende Code orange angezeigt wird, aber er wurde ursprünglich transparent geschrieben. Verwenden Sie daher die Regel:

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

Beim Testen im Browser ist dies immer noch der Fall Anzeige transparent. Dies liegt daran, dass die Auswahl des Inhalts p spezifischer ist als der Selektor von intor. In diesem Fall besteht die beste Möglichkeit, damit umzugehen, darin, die ID des Inhaltselements am Anfang des Absatzselektors von intor hinzuzufügen:

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

Ich schreibe das jetzt, ich möchte für eine Weile ausgehen.

Wir haben die Diskussion über die „Fragen der Besonderheit und Klassifizierungsreihenfolge“ im vorherigen Kapitel beendet. Beginnen wir nun mit der Diskussion über

2. Das Problem der überlappenden Leerkanten

Blank Edge Overlay ist eine weitere CSS-Besonderheit, die bei Missverständnis viel Ärger verursachen kann. Nehmen wir ein Beispiel:

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

Das p-Feld ist mit einem Rand von 10 Pixeln eingestellt

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

Auf diese Weise sollte Ihr idealer p-Rand 10 Pixel und das p-Tag A betragen Tatsächlich wird nur der 10-Pixel-Rand von p generiert. Es gibt nur einen 20-Pixel-Rand auf der Oberseite unten auf S. Abstand.

Dies hat zwei Gründe: Erstens überlappen sich die 20 Pixel des oberen und unteren Rands des Absatzes mit den 10 Pixeln des p und bilden einen einzigen vertikalen Rand von 20 Pixeln. Zweitens sind diese leeren Kanten nicht von p umgeben, sondern ragen über die Ober- und Unterkante von p hinaus. Dies liegt daran, dass die Höhe des untergeordneten Elements vom Element berechnet wird. Wenn ein Element keinen vertikalen Rand oder Abstand hat, entspricht seine Höhe dem Abstand zwischen der oberen und unteren Randkante der darin enthaltenen untergeordneten Elemente. Daher ragen der obere und der untere Rand des enthaltenden untergeordneten Elements über das Containerelement hinaus. Es gibt jedoch eine einfache Lösung. Durch das Hinzufügen eines vertikalen Rahmens oder einer Auffüllung überlappen sich die Leerzeichen nicht mehr und die Höhe des Elements entspricht dem Abstand zwischen der oberen und unteren Leerzeichenkante seiner enthaltenden untergeordneten Elemente. Der Code lautet wie folgt:

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

ok Das Problem ist gelöst. Im nächsten Kapitel werde ich über die Grundkenntnisse der Fehlererfassung sprechen.

2. Probleme bei der Fehlerisolierung

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

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问题，从而达到对其了解和修复它们！

Das obige ist der detaillierte Inhalt vonFehler in CSS, die Sie kennen müssen und wie Sie sie beheben können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!