About bugs in CSS and how to fix them

CSS is a fairly easy-to-learn language compared to many programming languages. Its syntax is simple and straightforward, and because of its expressive nature, developers do not need to deal with complex logic. However, when you test your code in a different browser, the difficulty comes along. How to display browser bugs is a major challenge for most CSS developers. Your design displays well on one browser, but the layout may be fragmented on a different browser.

The misconception that "CSS is hard to control" does not come from the language itself, but because it takes a series of necessary steps to make the site work properly on all major browsers. Let's take a look at some of the bugs.

First, how to catch the bug

We all know that browsers have bugs, and some browsers have more bugs than other browsers. When a CSS developer encounters a problem in his code, some people blame the bug on the browser and take the appropriate tricks. In fact, the bug is too exaggerated, the bug is not as common as people say. The most common CSS problem is not a browser bug, but an incomplete understanding of the CSS specification.

Many developers are self-taught, and they build their own thinking models of the effects. When something does not meet their expectations, the browser is the culprit. To avoid this problem, when dealing with CSS bugs, it is best to assume that you are not in the wrong place, check the code with your doubts, and examine each code, so that you can naturally improve when you find your grammatical errors. When you can't find it, consider the issue of browser bugs.

Common CSS Issues

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

But also remember that the checker is just a tool for automatic checking, not completely reliable. It is possible to give you an dumbfounded error, which is also a bug in the checker, but you should be able to figure out whether he quoted a true error.

1. Issues of specificity and classification order

In addition to grammatical errors, one of the more common problems is design specificity and classification order. When a rule is applied to an element, it is found to have no effect, which is often a matter of particularity. Other rules can be applied and they work fine, but some rules just don't work and are irritating. To make an analogy:

I want the following code to show the orange, but it was originally written in a transparent way, so that the rules are used:

#content P
{
Background-color:transparent;
}

. intro
{
Background-color: #feeca9
}

When testing in the browser, the transparency is still shown here. This is because the choice of content p is more specific than the Intor selector, in which case the best way to handle this is to add the ID of the element at the beginning of the Intor paragraph selector:

#content P
{
Background-color:transparent;
}

#content. Intro
{
Background-color: #feeca9;
}
Write it here first, and go out for a moment.

The previous chapter has already covered the question of "particularity and classification order", the amount we begin to speak

2. Problem with blank edge overlay

A blank edge overlay is another if misunderstood will lead to a lot of troublesome CSS peculiarities. Let's give an example:

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

The Div box has a 10-pixel blank edge set

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

P
{
margin:20px;
Background-color: #6699ff;
}
So your ideal should be the div margin is 10 pixels and the P label produces a 20-pixel margin, which is actually, only the DIV's 10-pixel margin is generated, the P-label only appears on the left and right side with a 20-pixel margin, and the top and bottom of the div does not produce margins.

This is caused by two reasons, first of all, the paragraph's 20 pixels of the top and bottom blank edge of the div's 10 pixels overlap, forming a single 20-pixel vertical blank. Second, these blank edges are not surrounded by div, but protrude to the top of the div and to the outside of the bottom. This occurs because the element of the child element calculates its height. If the element has no vertical border or padding, its height is the distance between the top of the child element it contains and the edge of the bottom border. Therefore, the top and bottom blank edges of the contained child elements protrude to the outside of the container element. However, there is an easy workaround. By adding a vertical border or padding, the blank edges are no longer superimposed, and the height of the element is the distance between the top of the child element it contains and the edge of the bottom margin. The code is as follows:

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

P
{
margin:20px;
Background-color: #6699ff;
}
Ok problem solved, the next chapter I talk about the basic knowledge of bug capture.

Second, the problem of isolation

Next you need to try to isolate the problem. By isolating the problem and identifying the symptoms, it is possible to find out what caused the problem and fix it. One way to isolate the problem is to apply a border or outline to the relevant elements to 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;
Ten border:1px solid green;
11}
(I generally like to put the border directly in the page add, so that after the treatment of the better processing) can use the Firefox Developer Toolbar plug-in outline options, or use to give different elements to outline the bookmarklet one. Sometimes, just adding a border will fix the problem, which often means that this is a blank edge overlay problem.

Try to modify a few properties, see if they affect the bug, if there is an impact, then which element, that the effect of a style to find this element, OK. For example, if the gap between the two frames is larger than you think in IE, then increase the margin to test and see what happens. If the gap between the borders doubles, then you may have encountered IE double blank edge floating bug.

1 #promo1
2 {
3 float:left;
4 margin-right:40px;
5 border:1px solid red;
6}
7 #promo2
8 {
9 Float:left;
Ten border:1px solid green;
11}
Try some common solutions. For example, you can fix many IE bugs by setting the position property to relatively, setting the display property to inline (on a floating element), or setting a property of width or height to increase or shorten it. This way you can find a lot of CSS problems to get to know them and fix them!

