Sharing: Some experience in solving CSS bug problems

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!