Über Fehler in CSS und wie man sie behebt

与许多编程语言相比，css是一种相当容易学习的语言。它的语法简单明了，而且由于它的表现本质，开发人员并不需要处理复杂的逻辑。但是，当在不同的浏览器中测试代码时，困难就会随之出现。浏览器bug何不一至的显示方式是大多css开发人员面临的主要难题。你的设计在一种浏览器上显示的很好，但在另一种浏览器上布局可能就会支离破碎。

     “css难以掌控”的误解并不来源于语言本身，而是由于为了让站点在所有主流浏览器上工作正常而采取一系列必要的措施。下面我们就来讲解一下bug的一些情况。

  一、如何捕捉bug

      我们都知道浏览器是有bug的，而且一些浏览器的bug比其他浏览器多。当css开发人员在自己代码中遇到了难题时，一些人就会把错误归咎于浏览器的bug，采取适当的招数。其实，大家把bug太夸大了，bug并没有人们说的那么常见。最常见的css问题并非来源于浏览器bug，而是对css规范的理解不完整。

      许多开发人员是自学的，他们自行建立对效果的思维模型。当某些东西不符合他们的预期时就会把浏览器的当成罪魁祸首。为了避免这个问题，在处理css bug时最好假设自己是不是哪里写错了，带着对自己的怀疑来检查代码，每个代码推敲一下，这样的话在找出自己语法错误的时候自然就能不断提高了。当实在找不到时，再来考虑是不是浏览器bug的问题。

      常见的css问题

      最简单的一些css问题是由代码中的打字和语法错误造成的。防止这种bug的最好方法一是通过css检查器运行代码(ttp://jigsaw.w3.org/css-validator/)。这应该会发现所有语法错误，并且向你显示所在的行和对每个错误的简短描述。

 

      但是也要记住，检查器只是一个自动检查的工具，并不是完全可靠。它有可能会报出让你目瞪口呆的错误，这也是检查器的bug，但是你应该能够分清楚他报出的是不是真错误。

      1.特殊性和分类次序的问题

      除了语法错误之外，比较常见的问题之一设计特殊性和分类次序。在将一个规则应用于元素时，却发现没有任何效果，这是往往存在特殊性问题。可以应用其他规则而且它们工作正常，但是某些规则就是不起作用，很是气人。打个比方：

      我想要如下代码显示橙色的，但是它原来写的是透明的，这样运用规则：

#content p
{
background-color:transparent;
}

.intro
{
background-color:#feeca9
}
      

       览器中测试的时候，这里仍然显示透明。这是因为于选择content p比intor的选择器的特殊性更强，在这种情况下，最好的处理方式是在intor段落选择器的开头添加内容元素的id：

#content p
{
background-color: transparent;
}

#content .intro
{
background-color: #feeca9;
}
先写到这里，要出去一下。

上一章已经讲完了“特殊性和分类次序的问题”，金额下来我们开始讲

      2.空白边叠加的问题

      空白边叠加是另一个如果误解就会导致很多麻烦的css特殊性。下面我们来举个例子：

This paragraph has a 20px margin.

Das Div-Feld wird mit einem 10-Pixel-Rand eingestellt

#box{
margin:10px;
background-color:#d5d5d5;
}

p
{
margin:20px;
background-color:#6699ff;
}
Auf diese Weise sollte Ihr idealer Rand 10 Pixel für das Div und 20 Pixel betragen Für das p-Tag wird tatsächlich nur der 10-Pixel-Rand des Div generiert, das p-Tag erscheint nur auf der linken und rechten Seite mit 20-Pixel-Rändern und oben und unten im Div generieren keine Margen.

Dies hat zwei Gründe: Erstens überlappen sich die 20 Pixel des oberen und unteren Rands des Absatzes mit den 10 Pixeln des Div und bilden einen einzigen vertikalen Rand von 20 Pixeln. Zweitens sind diese Leerraumkanten nicht vom Div umgeben, sondern ragen über die Ober- und Unterkante des Div 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. Fehlerisolationsproblem

Als nächstes müssen Sie versuchen, das Problem zu isolieren. Durch die Eingrenzung des Problems und die Identifizierung der Symptome ist es möglich, die Ursache des Problems herauszufinden und es zu beheben. Eine Möglichkeit, das Problem einzugrenzen, besteht darin, einen Rahmen oder eine Kontur auf die relevanten Elemente anzuwenden und zu sehen, wie sie reagieren:

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 🎜> (Normalerweise füge ich der Seite gerne Rahmen direkt hinzu, damit sie später einfacher zu handhaben sind.) Sie können die Umrissoption im Firefox-Entwicklersymbolleisten-Plug-in verwenden oder die gewohnten Umrisse verwenden Fügen Sie der Seite verschiedene Elemente hinzu. Manchmal lässt sich das Problem einfach durch das Hinzufügen eines Rahmens beheben, was oft darauf hindeutet, dass es sich um eine Leerraumüberlagerung handelt.

Nachdem Sie versucht haben, einige Attribute zu ändern, prüfen Sie, ob sie sich auf den Fehler auswirken. Wenn ja, um welches Element es sich handelt und welcher Stil es betrifft, ist es in Ordnung. Wenn beispielsweise die Lücke zwischen zwei Frames größer ist, als Sie im IE denken, erhöhen Sie den Abstand und testen Sie ihn, um zu sehen, was passiert. Wenn sich der Abstand zwischen den Rändern verdoppelt, stoßen Sie möglicherweise auf den Double-Margin-Floating-Fehler des IE.

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 }
Probieren Sie einige gängige Lösungen aus. Wenn Sie beispielsweise die Positionseigenschaft auf „relativ“ setzen, die Anzeigeeigenschaft auf „inline“ (auf einem schwebenden Element) oder die Eigenschaften „width“ oder „height“ festlegen, um sie größer oder kleiner zu machen, können viele IE-Fehler behoben werden. Auf diese Weise können Sie viele CSS-Probleme finden, sie verstehen und beheben!