Shulou(Shulou.com)06/03 Report--

What this article shares with you is an example analysis of CSS multi-browser compatibility. The editor thinks it is very practical, so I hope you can get something after reading this article. Let's take a look at it with the editor.

1. DOCTYPE affects CSS processing.

2. FF: after setting padding, div will add height and width, but IE will not, so you need to use! important set up an extra height and width

3. FF: support! important, IE ignore, available! important specially sets the style for FF

4. Vertical centering of div: vertical-align:middle; increases the line spacing to the same height as the whole DIV, line-height:200px; and then inserts text, which is centered vertically. The disadvantage is to control the content and not to change the line.

5. The solution of phase difference 2px caused by the inconsistent interpretation of BOX model in mozilla firefox and IE:

The code is as follows:

Div {marginal Vista 30px importantposition marginal Vista 28px;

Note that the order of the two margin must not be reversed. The property! important is not recognized by IE, but can be recognized by other browsers. So under IE, it is actually interpreted as follows:

The code is as follows:

Div {maring:30px;margin:28px}

If you repeat the definition, follow the last one, so you can't just write marginal _ XXpxwords

Browser difference

1. Ul and ol list indentation problem

When eliminating indentation of ul, ol, etc., the style should be written as: list-style:none;margin:0px;padding:0px

Where the margin attribute is valid for IE and the padding attribute is valid for FireFox.

[note] it has been verified that in IE, setting margin:0px can remove the top and bottom indentation, white space, and list number or dot of the list, setting padding has no effect on the style; in Firefox, setting margin:0px can only remove the upper and lower white space, setting padding:0px can only remove left and right indentation, you must also set list-style:none to remove list number or dot. In other words, only setting margin:0px in IE can achieve the final effect, while in Firefox, margin:0px, padding:0px and list-style:none must be set at the same time to achieve the final effect.

2. Transparency of CSS

The code is as follows:

IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).

FF:opacity:0.6 .

[note] it's best to write both and put the opacity attribute below.

3. CSS fillet problem

Fillets are not supported in versions below IE:ie7.

FF:-moz-border-radius:4px, or-moz-border-radius-topleft:4px;-moz- border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border-radius- bottomright:4px;.

[note] fillet problem is a classic problem in CSS. It is recommended to use the JQuery frameset to set the fillet, leaving these complex problems to others to think about. However, the fillet of jQuery can only see the fillet that supports the whole area, but there is no fillet that supports the border, but the fillet of this frame can be realized by some simple means, which will be introduced next time.

4 、 cursor:hand VS cursor:pointer

Problem description: firefox does not support hand, but ie supports pointer, both of which are hand instructions.

Solution: use pointer uniformly.

5. Different font sizes are defined.

The definition of font size small is different, 13px in Firefox and 16px in IE.

Solution: use the specified font size such as 14px.

Between div and div of multiple elements (pictures or links) arranged side by side, spaces in the code and carriage returns are ignored in firefox, while spaces (about 3px) are displayed by default in IE.

6. CSS double-line bump frame

The code is as follows:

IE:border:2px outset; .

FF:-moz-border-top-colors: # d4d0c8whiteport-left-colors: # d4d0c8whiteforth Mozwick Mozwashi RightLiguza "4040" 808080TIMOTHUBUTHUBULITE: 404040 # 808080

Browser bug

1. Bilateral distance bug of IE

Div set to float doubles the margin set under ie. This is a bug where all ie6 exists.

Solution: add display:inline to the div

For example:

The code is as follows:

# IamFloat {

Float:left

It is understood as 10px*/ under margin:5px;/*IE

Under display:inline;/*IE, it is then understood as 5px*/.

}

# IamFloat {

Float:left

It is understood as 10px*/ under margin:5px;/*IE

Under display:inline;/*IE, it is then understood as 5px*/.

}

There are so many questions about CSS that even the same CSS definition is displayed differently in different page standards. A suggestion in line with the development is that pages should be written in standard XHTML standards, with fewer table,CSS definitions as far as possible in accordance with the standard DOM, while taking into account mainstream browsers such as IE, Firefox, Opera and so on. In many cases, the CSS interpretation standards of FF and Opera are closer to CSS standards and more normative.

2. IE selector space BUG

A space can also invalidate a style. Take a look at the following code:

The code is as follows:

To the world you may be one person, but to one person you may be the world. Never frown, even when you are sad, because you never know who is falling in love with your smile.

This code is correct.

The first character style definition on IE6 has no effect (IE7 is not tested), but after p:first-letter and {font-size:300%} add a space, that is, p:first-letter {font-size:300%}, the display will be normal. But the same code looks normal under FireFox. According to reason, p:first-letter {font-size:300%} is written correctly. So what's the problem? The answer is the hyphen "-" in the pseudo class. IE has a BUG. When dealing with pseudo-classes, if the pseudo-class name contains a hyphen "-", the pseudo-class name must be followed by a space, otherwise the definition of the style will be invalid. In FF, whether or not to add spaces can be handled normally.

The above is the example analysis of CSS multi-browser compatibility, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.