Sharing: Some experience in solving CSS bug problems

Source: Internet
Author: User
Keywords Fix BUG some

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

CSS bug problem is a front-end friends will encounter problems, especially for just learning web design, do page slicing is often encountered problems. When we had a problem, maybe 8630.html "> sometimes will be unprepared, sometimes solved a whole day can not solve, is very annoying." Of course, there are some ways to solve the problem of CSS bugs, for example, we can first find the root cause of the problem. Here are some good ways to find the root of the problem. Some are my personal summary, some are online search, hoping to facilitate the solution of CSS bugs. First of all, develop good writing habits, code semantics, modular, in line with the Web standards. Can reduce many bugs, can give us a lot of unnecessary trouble. Our code will be much better and more elegant.

Check if the HTML tag is closed and the spelling is wrong

This one can not be underestimated ah, sometimes tossing your day's problem may be here. And this kind of error may be more common for beginners, and it may also be a problem for the front-end friends who have been doing it for some time. So be careful when writing code. I usually use Dreamweaver to write code, so there is a shortcut: generally there is no closed tag, there will be a yellow background highlighted. Check the CSS spelling error, Dreamweaver also has a function, is when you open code prompts, write the wrong CSS code, he will not appear code hints.

Exclusion method

When we create a more CSS file, we need to use the elimination method, one by one to exclude the CSS file, so as to find the corresponding file of the bug, narrow the scope. This method is more commonly used.

Background Border Debugging method

The so-called background border debugging method, that is, the elements of the border or background set to a conspicuous color, you can be a good area to separate the layout of the page structure, so as to debug. The area from which the bug can be quickly positioned is from.

Check to see if floating is cleared

There are a lot of CSS problems because the container set the float, causing the page dislocation. It looks scary on the page because it can be very different from what you want. But don't be nervous, this may be caused by not clearing the float. There are many ways to clear the float.

This method is more recommended by many people:

Clearfix:after{content: "."; display:block; height:0; clear:both; visibility:hidden; text-align:center}.clearfix{ Display:inline-block; * HTML. Clearfix{height:1%}.clearfix{display:block;}

Clearfix:after{content: "."; display:block; height:0; clear:both; visibility:hidden; Text-align:center}

. Clearfix{display:inline-block;

* HTML. Clearfix{height:1%}.clearfix{display:block;}

I often use clear:both of course or recommend you use Clearfix method.

Check the haslayout below IE

ie See IE two words will think of IE6 and bugs, I do not know you will not? A lot of IE complex bugs are associated with haslayout. Stay away from bugs work more smoothly, life better!

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.