Compatibility issues hack practices in div+css layouts

DIV+CSS layout of the compatibility problem, in addition to some tips, often need to combine CSS hack writing to solve. The principle of CSS hack is for each browser to CSS properties of the support and resolution of different results, as well as the implementation of CSS priority issues, to different browsers to write different CSS.
1 floating dislocation problem in IE
Often, we define a div floating time, especially in CSS useful to the margin attribute, Mozilla Firefox normal, but ie this div will run to the next line, the solution is very simple, you only need to add a sentence in your CSS attributes: Display: inline, such as:

The code is as follows	Copy Code
. Example{width:300px;float:left;margin-left:10px;display:inline}ie

Series browsers have problems with margin parsing, if the conditions are as much as possible with the padding attribute to write, this will not occur. Of course, if the above situation can not be solved, then add the sentence: Overflow:hidden, the overflow width of the part of the hidden, which may be related to the elements in your div box, as follows:

The code is as follows	Copy Code
. Example{width:300px;float:left;margin-left:10px;display:inline;overflow:hidden}

If you write this, you can say that the above problem is completely solved.
2 use clear to solve line-changing problems
This is also common, is that our definition div may not press our design effect diagram to change lines, very annoying to follow the previous Div butt behind. This solution is very simple, just need to add Clear:both in your CSS properties to clear both sides of the floating can be perfectly resolved.
3 Page Height Adaptive problem
About the page height adaptive problem is really very annoying, especially when multi-layer nesting, but we can use Clear:both to solve, here is different from the above mentioned line wrapping problem. The idea is to create an empty block of invisible content that clears the float for the target element, such as:

The code is as follows	Copy Code
<div> <ul> <li>test....</li> </ul> <div></div> </div> Our CSS can be written like this: . Clearfix{clear:both;content: "."; Font-size:0;height:0;overflow:hidden}

This method is very useful, can be said to be tried, also apply to other places on the page, personal advice, before you close a parent div and the example above, add a sentence of <div></div>.
4) skillfully using min-height to solve the problem of minimum height
In Div+css layout, it is often necessary to define the minimum height of the div element, which can be solved well by the following combination of CSS hack.

The code is as follows	Copy Code
#test {min-height:200px;/* height minimum is set to: 200px*/height:auto!important;/* compatible FF,IE7 also supports!important label */height:200px;/* compatibility IE6 */overflow:visible}

5) Recommended: General CSS hack to solve most of the compatibility issues
Is it still for IE and FF under the several pixels of the problem to toss it? Very simple, as long as the mastery of the following CSS hack writing, package you charm!

The code is as follows	Copy Code
#style {color:red};/* for FF, which all browsers recognize * *, * HTML #style {color:green};/* only IE6 know, redefine the class before overwriting * * * +html #style {color:blue};/* only IE7 know, ditto * * For IE8, you can declare in the HTML page header: <meta http-equiv= "x-ua-compatible" content= "ie=7″/" ",

Compatible with IE8 in IE7 mode.
Attached: CSS hack browser compatibility writing encyclopedia

Above is the DIV+CSS layout common browser compatibility problem solution and some CSS hack use method, the individual does not suggest using Hack method