Home > Web Front-end > CSS Tutorial > Differences in padding and margin between browsers_Experience exchange

Differences in padding and margin between browsers_Experience exchange

WBOY
Release: 2016-05-16 12:09:08
Original
1910 people have browsed it

Margin and padding may always be used, but how to solve the problems caused? Because browsers interpret container widths in different ways:
IE 6.0 Firefox Opera, etc. are
Real width=width padding border margin
IE5.X
Real width=width -padding-border-margin

The solution is:

div.content {
width:400px; //This is the wrong width, all browsers read it
voice-family: "\"}\""; //IE5.X/win Ignore the content after "\"}\""
voice-family:inherit;
width:300px; //Some browsers including IE6/win read this sentence, the new value (300px ) overwrites the old one
}
html>body .content { //html>body is the writing method of CSS2
width:300px; //Browsers (non-IE5) that support CSS2 writing method are lucky enough to read this sentence# ##}

div.content {

width:300px !important; //This is the correct width. Most browsers that support the !important tag use the value here
width (space)/**/:400px ; //IE6/win does not parse this sentence, so IE6/win still thinks that the value of width is 300px; while IE5.X/win reads this sentence, the new value (400px) overwrites the old one because of the !important tag Doesn't work for them
}
html>body .content { //html>body is the way CSS2 is written
width:300px; //The browser that supports CSS2 is lucky enough to read this sentence
}##


Differences in padding and margin between browsers_Experience exchange#Small
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template