Ways to troubleshoot problems when you learn CSS page layouts

Although browsers may have a lot of bugs, it's not like you're having a bug when you feel different. There may be many reasons for the problem, so the creator needs some way to troubleshoot the problem.

It is 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 is correct in the advanced browser, and there is a problem in IE, it can basically be judged to be IE problem.
If the display in the Advanced browser is incorrect, you can first make the following preliminary judgments:
1. Spelling is correct
You can use the checksum of the web-site, or the page editing software, to check (X) whether the labels in the HTML document match, whether the nesting order is correct, Whether the empty label is closed, and whether the CSS is spelled correctly. Incorrect nesting and incorrect spelling are common errors.
Tip: There are many editing software available to provide (X) HTML and CSS checksums, including whether browsers support 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.
2. Whether there is a suitable DTD
in other chapters of this book, once more than once emphasized the importance of DOCTYPE, different DOCTYPE directly affect the browser for (X) HTML and CSS interpretation.
3. CSS Property Browser support
Although modern browsers support most CSS 2.1 specifications and part of the CSS 3 specification, in the previous chapters, some CSS properties are not yet widely supported by browsers, so when a property is not in effect, Make sure the browser supports it.
4. Quarantine issues
Highlight the problem, such as adding a bold border or background color to the element.
If you add a border to solve the problem, the margin overlaps.
If the background is added, but the background is not displayed, it may be specific or the floating element is not closed. The
attempts to modify some properties, especially those that trigger IE's haslayout, to determine if it is a common bug in IE.
5. Establish basic tests
if you can't solve the problem, 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 spaces between elements to see if the problem disappears. The
then blocks the stylesheet until the problem disappears, and the style you just commented out is the problem.
6. Solve problems instead of solving them
find the root of the problem and solve it as a final goal, rather than using complex hack to make the page "look beautiful" for the sake of 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.
Use hack only when there is no solution.