1. Check whether the HTML element has a typo or whether it forgets the end tag
Even veterans often get the nested relationships of divs. You can use the Dreamweaver verification function to check whether there are any errors.
2. Check whether the CSS is correct
Check for any spelling errors, whether you forget the ending}, etc. CleanCSS can be used to check for typos of CSS. CleanCSS is a tool for losing weight for CSS, but it can also be checked for spelling errors.
3. Determine where the error occurred
If the error affects the overall layout, you can delete the div block one by one until the div block is deleted and the display returns to normal, and you can determine the location of the error.
4. Use the border attribute to determine the layout characteristics of the error element
If you accidentally layout the float property, you will make an error. At this time, add a border attribute to the element to determine the element boundary, and the reason for the error is revealed.
5. The parent element of the float element cannot specify the clear attribute
If you use the clear attribute on the parent element of the float element under MacIE, the layout of the float element around will be confused. This is a famous bug in MacIE, and if you don’t know, you will take a detour.
6. The float element must specify the width attribute
Many browsers will have bugs when displaying float elements with unspecified width. So no matter what the content of the float element is, you must specify the width attribute.
In addition, when specifying elements, try to use em instead of px as the unit.
7. The float element cannot specify properties such as margin and padding
IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify margin and padding attributes for the float element (you can nest a div inside the float element to set margin and padding). You can also use the hack method to specify extraordinary values for IE.
8. The sum of the widths of the float element should be less than 100%
If the sum of the widths of the float elements is exactly 100%, some ancient browsers will not display normally. Therefore, please ensure that the sum of widths is less than 99%.
9. Have the default style been reset?
Some attributes such as margin, padding, etc. will have different explanations for different browsers. Therefore, it is best to first set the entire margin and padding to 0, the list style to none, etc. before development.
10. Have you forgotten to write DTD?
If the display results of different browsers are still different, then you can check whether you forgot to write the following line DTD at the beginning of the page:
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd "＞