How to use important to solve the css compatibility between firefox and ie
This article mainly explains "how to use important to solve the css compatibility problem of firefox and ie". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use important to solve the css compatibility problem of firefox and ie".
For some layers with variable content (such as user comments), 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; at the same time, we hope that when there is more content, the height of the layer can be automatically extended, that is, it requires height: auto. At this point, you can set the min-height property of css. Min-height is valid in Firefox, but IE does not recognize it. You can use the following solution:
The code is as follows:
.div _ class {
Min-height:30px
Height:auto! important
Height:30px
}
The first line setting min-height:30px; is valid for Firefox; the second line height:auto! important; is also valid for Firefox, followed by "! important" is a Firefox-specific flag, settings with this flag have the highest priority, and subsequent settings have no effect. So the third line of height:30px is not valid for Firefox; at the same time, because IE does not recognize min-height and "! important", only the third line is valid, because IE is highly adaptive by default, so even if you set the height of 30px, as long as there is a lot of content, it will automatically open, there is no need to set height:auto. Finally, the above code produces the following effect:
For Firefox, it is equivalent to:
The code is as follows:
.div _ class {
Min-height:30px
Height:auto
}
For IE, it is equivalent to:
The code is as follows:
.div _ class {
Height:30px
}
"! important" is a very easy thing to use, and if you've written cross-browser CSS code for months, it's easy to get annoyed by the difference between Firefox and IE. For example, the padding property is an example.
Suppose such a layer:
The code is as follows:
.div _ name {
Width:100px
Padding:10px
}
In IE, the width of the layer is 100px, and the space around it is 10px; but for Firefox, the width of the layer becomes 100px+10px+10px=120px, which is messy for width-sensitive designs. What should I do? Turn to "! important" for help. Just write like this:
The code is as follows:
.div _ name {
Width:80px! important
Width:100px
Padding:10px
}
Because 80'10'10 '100. Just enough to make the width 100px.
Sometimes, we add a border to a layer, and the width increases in the Firefox, such as:
The code is as follows:
.div _ name {
Width:100px
Padding:10px
Border:2px solid # ccc
}
In the upper layer, the actual width in Firefox is equal to 100+10+10+2+2=124px, because the border also increases the width. What are we going to do? just rely on "! important" and write it like this:
The code is as follows:
.div _ name {
Width:76px! important
Width:100px
Padding:10px
Border:2px solid # ccc
}
Thank you for your reading, the above is the content of "how to use important to solve the css compatibility problem of firefox and ie". After the study of this article, I believe you have a deeper understanding of how to use important to solve the css compatibility problem of firefox and ie. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
