CSS required for front-end development (I) CSS hack

During development, we often encounter some CSS display in IE, but it is not what we want to display in Firefox, or it is normal in Firefox, but it is not what we want in IE. Because different browsers have different support and resolution for CSS, or their priorities are different, we often write different CSS for different browsers so that they can be compatible with different browsers at the same time, this is CSS hack. It can also be said that CSS hack is the characters that can distinguish different browsers, such! Important, *, _, etc. After reading some online related knowledge and practices, I will summarize them.

CSS hack of various browsers:

Before IE7 is released, you can distinguish ie from Firefox (OP is the same as Firefox! Important. For example, body {background-color: Green! Important; Background-color: Blue;}. Open the page in IE6. the background color of the body is blue because IE6 is not recognized! Important, while Firefox recognizes it! Important, so in Firefox, the background color is green and contains! Important styles should be written in front, because if both styles can be identified, the latter will overwrite the former.

IE7 of the cup is recognized! Important, so you cannot rely on it only! Important to differentiate Firefox.

In addition, some of the explanations for the "*" number are as follows: *: the HTML element is considered to be the first element on the webpage, that is, the root element. However, all current versions of IE have an anonymous root element, which is surrounded by HTML elements, that is *.

IE6 IE7 can recognize *, but FF cannot. IE6 supports underlines, while IE7 and Firefox do not. * + Is only supported by IE7.

Difference ff and IE6:
Background-color: Green! Important; * Background-color: blue;

Difference between IE7 and IE6:
Background-color: Green! Important; Background-color: blue;

Difference between IE7 and FF:
Background-color: orange; * Background-color: blue;

Difference ff, IE7, IE6:
Background-color: orange; * Background-color: Green! Important; * Background-color: blue;

Or background-color: orange; * Background-color: green; _ Background-color: blue;

Then, IE8 came out again, and the only one recognized by IE8 was \ 0.

So:

. Test {
Color: #000000;/* ff, OP supported */
* Color: # FFFF00;/* IE7 supported */
_ Color: # ff0000;/* IE6 support */

Color: # 0000ff \ 0;/* IE8 */
}

Writing sequence:

Because FF/OP cannot recognize _ \ 0 and *, IE7 cannot recognize _ and \ 0, and IE6 cannot recognize \ 0, so the order should be:

FF-IE7-IE6-IE8

Application:

The width of the container is different from that of browsers such as Firefox. The width of Firefox and opera only contains the width of the content in the container. Internet Explorer's width refers to the width of the entire container, including content, padding, and border-width.

Div. Box {

Border-width: 50px;

Padding: 50px;

Width: 200px;
Height: 200px;
* Width: 400px;/* the plus sign is recognized by all IE */
* Height: 400px;
}

In this way, the width and height of the content in IE and FF are both 200px.

 

For this column, there is another solution:

You only need to add a wrapper layer without width definition outside the DIV, define the padding and border-width in the wrapper, and then define the width in the div.
For example:
# Wrapper {padding: 50px; border-width: 50px ;}
# Content {margin: 0px; width: 200px ;}
<Div id = "wrapper">
<Div id = "content">
...
</Div>
</Div>

In this way, the content must be 200px, And the padding and border-width outside are also displayed normally, the main difference is that different browsers will affect the width of the padding and border-width to be extracted from the layer outside the content layer, so that the width will not be affected.