CSS different browser compatibility issues

IE5. X/win's resolution of Box-model is the same, they think that the width includes the border (border) and filler (padding), fortunately this situation in the IE6 has improved
but IE6 is backward compatible with the previous error, IE6 actually has two cores, in the old page he still shows the tolerance of the error, only in the document strictly with the document type (DOCTYPE) declaration, IE6 can accept the correct Box-model
So, Tantak hack must be included with the correct DOCTYPE in the document to work correctly
Quote
Div.content {
width:400px;//This is the wrong width, all browsers read
Voice-family: ""} ""; IE5. X/win ignored the contents of the ""} "" "
Voice-family:inherit
width:300px;//The part of the browser, including Ie6/win, reads this, and the new value (300px) overwrites the old
}
Html>body. Content {//html>body is CSS2 's writing
width:300px;//Support CSS2 The browser is fortunate to read this phrase
}
now back to the topic we often see! Important and (space)/**/: What's the secret of this writing, using the combination?

Look at that writing, I can provide another way to achieve this effect
Quote
div.content {
width:300px!important; This is the correct width, most browsers that support!important tags use the values here
Width (space)/**/:400px; Ie6/win does not parse this sentence, so Ie6/win still think the value of width is 300px, and Ie5.x/win reads this, the new value (400px) covers the old, because the!important tag doesn't work for them.
}
Html>body. Content {//html>body is CSS2 's writing
width:300px; The browser that supports CSS2 this writing is fortunate to have read this sentence
}
Again, this method must still rely on the correct document type declaration to work properly, as has been said before.

A document type declaration is like a switch that opens the backward-compatible future, and when used incorrectly, is a Pandora box