Margin and padding are always possible to use, and how to solve the problem? Because the browser interprets container widths in different ways:
IE 6.0 Firefox Opera etc is
True width =width+padding+border+margin
IE5. X
True width =width-padding-border-margin
The workaround is to:
div.content {
width:400px; This is the wrong width, all browsers read the
voice-family: "\"}\ ""; IE5. X/win the contents of "\"}\ "" are ignored
Voice-family:inherit;
width:300px; Some browsers, including Ie6/win, read this sentence, and the new value (300px) covers out the old
}
Html>body. Content {//html>body is the CSS2 notation
width:300px; Browsers that support CSS2 (non-IE5) read this sentence.
}
div.content {
width:300px!important; This is the correct width, most browsers that support!important tag use the values here
Width (space)/**/:400px; Ie6/win Not parse this sentence, so Ie6/win still think the value of width is 300px, and Ie5.x/win read this sentence, the new value (400px) overwrite the old, because the!important tag does not work for them
}
Html>body. Content {//html>body is the CSS2 notation
width:300px; Support CSS2 The browser was fortunate enough to read this sentence.
}
Small