CSS tips: The combination of important and space skills and other

css| Tips

!important and (space)/**/: combination Techniques and other

Let's brush up on the box-model of IE
IE Box-model This notorious bug exists in every previous version of Ie6/win, and the bug did not begin to be tamed until Tantak released the most widely circulated hack.

Http://www.tantek.com/CSS/Examples/boxmodelhack.html
IE5. X/win's resolution of Box-model is the same, they think that width includes a border (border) and filler (padding), and fortunately this situation has improved in IE6.

But IE6 is backwards compatible with the previous error, IE6 actually has two core, in the old page before 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.

Therefore, the Tantak hack must be included with the correct DOCTYPE in the document to work properly.

div.content {
width:400px; //This is the wrong width, all browsers have read the
voice-family: "}\" "; //ie5. X/win ignores the contents of "\"}\ ""
Voice-family:inherit;
width:300px; //Including Ie6/win, some browsers read 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 have read this sentence
}

Now back to the topic, we often see!important and (Space)/**/: The combination of use, what is the secret of this writing?

Look at that writing, I can provide another way to achieve this effect

div.content {
width:300px!important; //This is the correct width, most of the browsers that support the!important tag 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; //Support CSS2 The browser 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, it's a Pandora box.