Although there may be many bugs in the browser, it does not mean that there are bugs when you feel different. There may be many reasons for the problem, so the producer needs certain methods to troubleshoot the problem.
It is wise to choose an advanced browser for testing, such as Opera 9.2, Firefox 2.0 or Safari 3.0, which has better support for CSS 2.1. Do not use IE 6 as the only testing browser, because IE 6 has the most problems. , which is very unfavorable for producers (especially beginners) to understand the specifications of CSS 2.1 and determine whether the browser's performance is correct.
If the test is correct in advanced browsers, but there is a problem in IE, it can basically be determined that the problem is IE.
If the display in advanced browsers is incorrect, you can first make the following preliminary judgment:
1. Whether the spelling is correct, you can use the W3C verification or the verification function of the web page editing software to check whether the tags in the (X)HTML document are matched, whether the nesting order is correct, whether the empty tags are closed, and whether the CSS spelling is correct. Incorrect nesting and incorrect spelling are very common errors.
Tip: There are many editing software now that can provide (X)HTML and CSS verification functions, including whether the browser supports CSS attributes, etc. For example: Dreamweaver 8 or above, TopStyle and other software.
Tip: The add-on software "Firebug" in Firefox is a very useful tool. It can not only check whether (X)HTML, CSS and JavaScript are correct, but also dynamically display the frames and positions of elements in the page. It is very good for debugging web pages. auxiliary plug-in.
2. Is there a suitable DTD?
In other chapters of this book, the importance of DOCTYPE has been emphasized more than once. Different DOCTYPE directly affects the browser's interpretation of (X)HTML and CSS.
3. Does the browser support CSS attributes? Although modern browsers support most of the CSS 2.1 specifications and some CSS 3 specifications, as introduced in the previous chapter, some CSS attributes have not been widely supported by browsers, so in When a certain attribute does not take effect, please confirm whether the browser supports it.
4. Isolate the problem to highlight the problematic area, such as adding a striking border or background color to the element.
If adding a border solves the problem, then it's an issue of overlapping margins.
If a background is added but the background is not displayed, it may be due to special features or the floating element is not closed.
Try to modify some attributes, especially the attributes that trigger IE's hasLayout, to determine whether it is a common bug in IE.
5. Set up a basic test If that doesn't solve the problem, you can copy the problem file and delete the extra (X)HTML, leaving only the problematic part.
Delete the comment problem within the (X)HTML and see if the problem goes away.
Remove the spaces between elements and see if the problem goes away.
Then comment out the style sheet in blocks until the problem disappears, then the style just commented out is the problem.
6. Solve the problem rather than solve the phenomenon. Finding the root cause of the problem and solving it is the ultimate goal, rather than using complex Hack to make the web page "look beautiful" just to accommodate performance. If you don't solve the problem at the root, you may encounter more problems when the browser is upgraded. At the same time, Hacking may cause new problems to arise, especially triggering or avoiding triggering IE's hasLayout attribute.
Another way of thinking may also be able to avoid the problem, such as canceling the margin attribute of the element and setting the padding attribute of its parent element instead.
Only use Hack when it really cannot be solved.