CSS skills: the combination of important and space and other skills

! Important and (space)/**/: combination techniques and other
First, let's take a look at the cracking of IE's box-model.
The notorious bug of IE box-model exists in every previous version of IE6/Win. This bug was not released until tantak released the most widely spread hack.
IE5.X/win parses box-model in the same way. They think width includes border and padding. Fortunately, this has improved in IE6.
However, IE6 is backward compatible with previous errors. In fact, IE6 has two cores, and he still shows tolerance for errors before the old pages, IE6 can accept the correct box-model only when the DOCTYPE statement is strictly added to the document.
Therefore, the hack of tantak must be included in the document with the correct DOCTYPE to work properly.

The code is as follows:

Copy code

Div. content { Width: 400px; // This is the incorrect width, which is read by all browsers. Voice-family: ""} "; // IE5.X/win ignores 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 written in CSS2. Width: 300px; // the browser that supports CSS2 is lucky enough to read this sentence. }

Now back to the topic, we often see it! Important and (space)/**/: used together. What are the mysteries of this writing?
Let's look at the writing method. Here I can provide another writing method to achieve this effect.

The code is as follows:

Copy code

Div. content { Width: 300px! Important; // This is the correct width, most of which are supported! The browser marked with important uses the value here Width (space)/**/: 400px; // IE6/win does not parse this sentence, so IE6/win still thinks that the width value is 300px; when IE5.X/win reads this sentence, the new value (400px) overwrites the old one because! Important flag does not work for them } Html> body. content {// html> body is written in CSS2. Width: 300px; // the browser that supports CSS2 is lucky enough to read this sentence. }

Similarly, this method can work normally only after the correct document type declaration, as mentioned earlier.
The document type declaration is like a switch that enables the future of backward compatibility. If it is used incorrectly, it is a Pandora box.