DIV+CSS solution for a bug in page layout

Source: Internet
Author: User
Tags html tags

Div+css layout, after a bug is present, consider examining the following aspects.

First, check whether the label of the page is closed

Do not underestimate this, perhaps toss you two days did not solve the problem of CSS bugs, but only from here. After all, page templates are generally nested by development, and they are easy to commit to such problems.

Quick tip: You can use Dreamweaver to open file check, generally do not have a closed label, will be highlighted yellow background.

Second, style exclusion method

Some complex pages may have loaded N outside the chain of CSS files, then one by one to delete the CSS file, find the specific BUG triggered CSS file, narrow the scope of the lock.

For the problem you just locked CSS style file, delete the specific style definition line by row, navigate to the specific trigger style definition, even the specific trigger style properties.

Third, the module confirms the method

Sometimes we can also start with the HTML elements of the page. Delete the different HTML modules in the page and find the HTML module that triggers the problem.

Check whether to clear floating

In fact, there are a lot of CSS BUG problems because there is no clear floating caused. It is necessary to form a good clearing of floating habits, and it is recommended that you use clear floating methods with no extra HTML tags (try to avoid using overflow:hidden;zoom:1 similar methods to remove floats, there are too many restrictions).

Check if IE triggers the Haslayout

A lot of IE complex CSS bugs are closely related to IE-specific haslayout. Familiarity and understanding of haslayout can be a multiplier for handling complex CSS bugs. Recommended reading OLD9 translation of "having layout" (if you can't climb through the great GFW, read the reprint on the blue)

Quick tip: If you trigger the Haslayout,ie debugging tools the properties in Internet Explorer Developer Toolbar will display the Haslayout value of-1.

Six, Border background debugging method

Therefore, the name incredible is to set a prominent border or background (generally black or red) for the element to debug. This method is one of the most common ways to debug a CSS bug and is still applicable for complex bugs. Economic benefits also environmental protection ^ ^

This article is provided by Shenzhen Siyuan Technology Co., Ltd. (http://www.sietoo.com), reproduced please indicate the source!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.