About bugs in css and how to fix them

与许多编程语言相比，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.

div box is set with 10 pixels of margin

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

p
{
margin:20px;
background-color:#6699ff;
}
In this way, your ideal ideal should be that the div's outer margin is 10 pixels and the p tag produces a 20 pixel outer margin. In fact, only the div's 10 pixel outer margin is generated, and the p tag only appears on the left and right sides. There is a 20 pixel margin on the side, and there is no margin on the top and bottom of the div.

This is caused by two reasons. First, the 20 pixels of top and bottom margins of the paragraph overlap with the 10 pixels of the div, forming a single 20 pixel vertical margin. Second, these whitespace edges are not surrounded by the div, but protrude beyond the top and bottom edges of the div. This happens because the child element's height is calculated by the element. If an element has no vertical border or padding, its height is the distance between the top and bottom border edges of its containing child elements. Therefore, the top and bottom margins of the containing child element protrude outside the container element. However, there is a simple solution. By adding a vertical border or padding, the whitespace no longer overlaps, and the element's height is the distance between the top and bottom whitespace edges of its containing children. The code is as follows:

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

p
{
margin:20px;
background-color:#6699ff;
}
ok The problem is solved. In the next chapter, I will talk about the basic knowledge of bug catching. G u b b b

The next time you need to try the problem of isolation. By isolating the problem and identifying the symptoms, it is possible to figure out what is causing the problem and fix it. One way to isolate the problem is to apply a border or outline to the relevant elements and see how they react:

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 }

(I usually like to add the border directly to the page, so that the aftermath can be dealt with easily (easier to deal with) You can use the outline option in the Firefox developer toolbar plug-in, or use one of the bookmarklets used to outline different elements. Sometimes, simply adding a border will fix the problem, which often indicates that the problem is white space overlay.个 After trying to modify a few attributes, see if they affect BUG, ​​if there is an influence, then which element, the impact of that style to find this element is OK. For example, if the gap between two frames is larger than you think in IE, then increase the margin and test it to see what happens. If the gap between borders doubles, you may be running into IE's double-margin floating 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 }

Try some common solutions. For example, setting the position property to relatively, setting the display property to inline (on a floating element), or setting the width or height properties to make them taller or shorter can fix many IE bugs. This way you can find a lot of css problems so you can understand them and fix them!

🎜