Important's magical work to solve the CSS compatibility problem of Firefox and IE

For some variable layer (such as user reviews), we want it to have a minimum height (such as 30px), so that even if the content is only one line, it will not be too ugly, but also hope that in the content of a lot of time, the height of the layer can be automatically open, that is, demand height:auto. You can then set the Min-height property of the CSS. Min-height is valid in Firefox, but IE is not recognized. You can use the following solution:

Copy CodeThe code is as follows:
. div_class{
min-height:30px;
Height:auto!important;
height:30px;
}

The first line is set min-height:30px; it is valid for Firefox, the second line is Height:auto!important; it is also valid for Firefox, and the "!important" behind it is a special Firefox tag. The setting with this tag has the highest priority and the subsequent settings are not valid. So the third row of height:30px is not valid for Firefox, and because IE does not recognize min-height and "! Important ", so only the third line is valid, because IE is highly adaptive by default, so even if the height of the 30px, as long as the content of a lot, will be automatically open, do not need to set up Height:auto. Finally, the code above produces the following effect:

For Firefox, it is equivalent to:

Copy CodeThe code is as follows:
. div_class{
min-height:30px;
Height:auto;
}

For IE, it is equivalent to:

Copy CodeThe code is as follows:
. div_class{
height:30px;
}

"!important" is a very useful thing, if you write a few months of cross-browser CSS code, it is easy to be the difference between Firefox and IE annoyed. For example, the padding attribute is an example.

Suppose such a layer:

Copy CodeThe code is as follows:
. div_name {
width:100px;
padding:10px;
}

In IE, the width of the layer is 100px, around the Yu Yin for 10px, but for Firefox, the width of the layer becomes 100px+10px+10px=120px, for the width-sensitive design, the whole is chaotic. What do we do? or resort to "!important". As long as you write it this way:

Copy CodeThe code is as follows:
. div_name {
width:80px!important;
width:100px;
padding:10px;
}

Because 80+10+10=100. Just let the width become 100px.

Sometimes, we add a frame to a layer, and in Firefox there will be an increase in width, such as:

Copy CodeThe code is as follows:
. div_name {
width:100px;
padding:10px;
border:2px solid #ccc;
}

Above this layer, in Firefox the actual width is equal to 100+10+10+2+2=124px, because the border will also increase the width. How to do, or rely on "!important", so write it:

Copy CodeThe code is as follows:
. div_name {
WIDTH:76PX!important;
width:100px;
padding:10px;
border:2px solid #ccc;
}

Important to solve the CSS compatibility problem with Firefox and IE