Website set up CSS layouts attention to item 10

Site under construction web design is an important part, which affect web design CSS layout is the main reason for good or bad, because many of our people for the CSS layout is not fully understood, often ready-made CSS layouts apply today Here we come to a simple check of several effective methods to debug CSS layout.

1. Check CSS is written correctly: check whether the spelling mistakes, forgotten at the end of the) and so on. CSS can be used CleanCSS to check the spelling errors. CleanCSS The CSS is a tool to lose weight, but also can check out the spelling error.



2. Check whether there is an error with the HTML element end tag: Even the old hands are often mistaken div nested relations can be used dreamweaver a validation check for errors.

3. Using border attribute characteristics to determine the layout of error element: What would you like the layout using the float attribute error. Then add a border attribute for the element to determine the boundary elements, error reason is get to the bottom.

4. With the delete method to determine the location of the error occurs: If the error affected the overall layout, you can remove the div-by-block, remove a div block until return to normal after the show, you can determine the location of the error occurred.

5. Float element of the parent element can not specify the clear property: MacIE float if the elements under the parent element using the clear property, the layout element will float around the chaos. This is the famous MacIE bug, do not know if it will sometime.

6. Float element must specify the width property: Many browsers display width of the float element is not specified, there will be bug. So no matter what the contents of float elements, we must assign a width attribute. Also try to use the specified element do em units instead of px.

7. Float element can not specify margin and padding and other properties: IE is specified in the display margin and padding of the float elements are bug. So do not specify the margin on the float and padding properties of elements (can be nested inside a div float element to set the margin and padding). Can also use the hack method to specify the particular value of IE.

8. Float element width and to less than 100%: If the width of float elements, and exactly 100%, some of the older browser will not display properly. Therefore, please ensure that the width is less than the sum of 99%.

9. Forgotten to write DT D: If the adjustment no matter how different browsers display the same results or not, you can check the page at the beginning is not forget to write DTD

10. Whether to reset the default styles: Some properties such as margin, padding and so on, different browsers have different interpretations. So the best first of all before the development of the margin, padding set to 0, the list style set to none other.