Some of the simplest CSS problems are caused by typing and syntax errors in the code. For example, you forgot to add a semicolon at the end of a statement, or you made a typo when you typed it. Workaround: Choose a css compiler that includes syntax highlighting and code completion. Be careful when writing your own code.
1. Issues of particularity and sorting order
When applying a rule to an element and finding no effect, this is often a specific problem.
For example, set the background color of all paragraphs in the content to white, but want the intro paragraph to be orange:
.content p{
background-color: white;
}
.intro{
background-color: orange;
}
If you test in the browser, you will see that the intro paragraph is still white. To achieve the desired result, you need to make the selector of the intro paragraph more special. The best way is to add the class of the content element at the beginning of the intro paragraph selector.
.content p{
background-color: white;
}
.content .intro{
background-color: orange;
}
2. Margin overlay problem
Margin overlays can cause many troublesome css features. Take a paragraph nested inside a div element as an example
<div id="mycontent">
<p>My margins are 20px</p>
</div>
//The div box is set to 10 pixels, and the paragraph is set to 20 pixels of margin
#mycontent {
margin: 10px;
background-color: #DDDDDD;
}
#mycontent p {
margin: 20px;
background-color: #FFFF00;
}
Now the paragraph's 20px top and bottom margins are superimposed with the div's 10px margins, creating a 20px vertical margin. This happens because of the way elements with block-level children calculate their heights.
Workaround: By adding a vertical border or padding, the margins no longer overlap, and the element's height is the distance between the top and bottom margin edges of its containing children.
#mycontent {
margin: 10px;
padding: 1px;
background-color: #DDDDDD;
}
#mycontent p {
margin: 20px;
background-color: #FFFF00;
}
3. 3 pixel text offset bug
As of IE8, this bug occurs when the text is adjacent to a floated element.
Solution: Set a small height height: 1%; margin-left: 0; and then set a right margin of minus 3 pixels on the floated element.
4. Capture bug knowledge
The first step in tracking down bugs is to inspect your html and css, checking for typographical or grammatical errors. Then check through the browser developer tools to understand the page and see if the properties are working.
Use a more standards-compliant browser (firefox) as the primary development browser in development. Remember, don't leave browser testing until the end of the project. A continuous testing approach should be employed, checking pages with all browsers during project development. This way you won't suddenly find many problems at the end of the page.
5. Try to avoid bugs in the first place
The best way to eliminate bugs is to avoid them in the first place. Many bugs are caused by overly complex html or css. Should achieve the desired result with the least amount of code.
6. Isolation Problems
Once you are confident that there is a bug, you need to do your best to isolate the problem. By isolating the problem and identifying the symptoms, it is possible to pinpoint the cause of the problem and fix it. One way to isolate is to use borders and outlines on related elements and see how they react, if a border fixes the problem, then it's a margin overlay problem.
Trying some common workarounds, such as setting the position property to relaticve, setting the display property to inline (on floated elements), or setting width and height, will fix many IE bugs.
7. Create basic test cases
The basic test case is the minimum amount of html and css needed to reproduce the bug. By creating basic test cases, some "variables" can be removed to simplify the problem.
Create a basic test case, copy out the problem file, then delete the redundant code and start commenting out or deleting code blocks. If the bug is gone, then the problem code is found and the problem is solved.
8. Fix problems, not symptoms
Knowing the source of the problem is beneficial for implementing the correct solution. The easiest solution is to avoid the problem. For example; if it is a problem with outer margins, we will use inner margins instead; if it is a combination of html, consider a different combination.
If the problem is found to be unavoidable, it can only be solved. If you still can't solve it, then ask for help, you can use the active forum.