CSS page layout Troubleshoot how errors occur

Although there may be a lot of bugs in the browser, it doesn't feel like it is a bug. There may be many reasons for the problem, so the creator needs some way to troubleshoot the problem.

It's wise to choose an advanced browser for testing, such as a better opera 9.2, Firefox 2.0, or Safari 3.0 for CSS 2.1, rather than IE 6 as the only test browser because IE 6 has the most problems. This is very bad for producers (especially beginners) to understand the specification of CSS 2.1 and to determine whether the browser's performance is correct.

If the test in the Advanced browser is correct, and there is a problem in IE, it can basically be judged to be IE problem.

If the display in the Advanced browser is not correct, you can first make the following preliminary judgment:

1. Spelling is correct

You can use the checksum of the Web page editing software to check (X) whether the labels in the HTML document match, whether the nesting order is correct, whether the empty tags are closed, and whether the CSS is spelled correctly. Improper nesting and incorrect spelling are common errors.

Tip: Now there are many editing software that can provide (X) HTML and CSS checksums, including whether the browser supports CSS properties or not. For example: Dreamweaver more than 8 version, TopStyle and other software.

Hint: Firefox add-on software "Firebug" is a very useful tool, it can not only check (X) HTML, CSS and JavaScript is correct, you can dynamically display the elements in the page box and location, is a good debugging Web page auxiliary plug-ins. Readers can visit its official website to download: http://www.getfirebug.com/(English)

2. Is there a suitable DTD

In other chapters of this book, the importance of DOCTYPE has been emphasized more than once, and different doctype directly affect the browser's interpretation of (X) HTML and CSS.

3. CSS Property Browser support

While modern browsers support most of the CSS 2.1 specification and part of the CSS 3 specification, in the previous chapters, there are some CSS properties that are not widely supported by browsers, so when a property is not in effect, make sure the browser supports it.

4. Segregation issues

Highlight areas where you have problems, such as adding a bold border or background color to the elements.

If you add a border to solve the problem, then the margin overlap problem.

If the background is added, but the background is not displayed, then it may be specific or the floating element is not closed.

Try to modify some of the properties, especially the Haslayout property that triggers ie, to determine if it is a common bug in IE.

5. Establish basic test

If the problem is not resolved, you can copy the problem file and then delete the extra (X) HTML, leaving only the problematic part.

Delete (X) The annotation problem in HTML to see if the problem disappears.

Delete the spaces between the elements to see if the problem disappears.

Then block out the stylesheet until the problem disappears, and the style you just commented out is the problem.

6. Solving problems rather than solving phenomena

Find the root of the problem and solve it as a final goal, rather than using complex hack to make the page "look beautiful" to accommodate performance. Do not solve the problem from the root cause, when the browser upgrade, you may encounter more problems. At the same time, hack may cause new problems, especially triggering or avoiding the haslayout properties of IE.

Another way of thinking might also be to avoid problems, such as canceling the margin property of an element and setting its parent element's Padding property instead.

Only when it is really impossible to solve, then use hack.