Bugs in CSS that you must know and how to fix them

Compared to many programming languages, CSS is a fairly easy language to learn. Its syntax is simple and clear, and due to its expressive nature, developers don't need to deal with complex logic. However, difficulties arise when testing code in different browsers. Why browser bugs are displayed in different ways is a major problem faced by most CSS developers. Your design may look great in one browser, but the layout may fall apart in another.

The misunderstanding that "CSS is difficult to control" does not come from the language itself, but from a series of necessary measures to make the site work properly on all major browsers. Below we will explain some situations of bugs.

1. How to catch bugs

We all know that browsers have bugs, and some browsers have more bugs than others. When CSS developers encounter problems in their own code, some people will blame the error on browser bugs and take appropriate measures. In fact, everyone exaggerates bugs, and bugs are not as common as people say. The most common CSS problems do not come from browser bugs, but from an incomplete understanding of CSS specifications.

Many developers are self-taught and build their own mental models of the effects. When something doesn't meet their expectations they point to the browser as the culprit. In order to avoid this problem, when dealing with css bugs, it is best to assume that you have made a mistake somewhere, check the code with doubts about yourself, and scrutinize each code. In this way, you will naturally be able to find your own syntax errors. Continuously improved. When you really can’t find it, consider whether it’s a browser bug.

Common CSS Problems

Some of the simplest CSS problems are caused by typing and syntax errors in the code. The best way to prevent this bug is to run your code through a css validator (ttp://jigsaw.w3.org/css-validator/). This should find all syntax errors and show you the line and a short description of each error.

But also remember that the checker is just an automatic checking tool and is not completely reliable. It may report errors that stun you, which is also a bug of the checker, but you should be able to tell whether the errors it reports are real errors.

1. Problems with specificity and classification order

In addition to grammatical errors, one of the more common problems is the design of specificity and classification order. There is often a specificity problem when you apply a rule to an element and find that it has no effect. Other rules can be applied and they work fine, but some rules just don't work, which is very annoying. For example:

I want the following code to display orange, but it was originally written to be transparent. Apply the rules like this:

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

When tested in the browser, it still displays transparent . This is because selecting content p is more specific than intor's selector. In this case, the best way to deal with it is to add the id of the content element at the beginning of the intor paragraph selector:

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

I’m writing this first, I want to go out for a while.

We have finished talking about the "issues of particularity and classification order" in the previous chapter. Now let's start talking about it

2. The issue of overlapping blank edges

Blank Edge overlay is another CSS peculiarity that can cause a lot of trouble if misunderstood. Let’s take an example:

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

The p box is set with a 10 pixel margin

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

In this way, your ideal p margin should be 10 pixels and the p label should produce 20 pixels. The margins, in fact, are that only the 10-pixel margin of p is generated. The p tag only appears with 20-pixel margins on the left and right sides, and no margins are generated on the top and bottom of p.

This is caused by two reasons. First, the 20 pixels of the top and bottom margins of the paragraph overlap with the 10 pixels of the p, forming a single 20 pixel vertical margin. Second, these blank edges are not surrounded by p, but protrude beyond the top and bottom edges of p. 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 child elements. 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 capture.

2. Bug isolation problem

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

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

The above is the detailed content of Bugs in CSS that you must know and how to fix them. For more information, please follow other related articles on the PHP Chinese website!