Multi-browser compatibility and solutions-CSS

In CSS and JavaScript development, the biggest headache is browser compatibility. Although many articles have such problems, many developers are still confused and not comprehensive. This article will comprehensively collect the css compatibility reports in various browsers, as well as browser rendering bugs, and I hope you will continue to supplement them.

Compatibility handling highlights
1. DOCTYPE affects CSS Processing

2. FF: After padding is set, the div will increase the height and width, but IE will not, so you need to use it! Set one more height and width for important.

3. FF: supported! Important, IE is ignored, available! Important sets a special style for FF

4. vertical center problem of div: vertical-align: middle; Increase the line spacing to the same height as the entire DIV line-height: 200px; then insert the text, and the vertical center is finished. The disadvantage is that you need to control the content rather than line feed.

5. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. solution:

Div {margin: 30px! Important; margin: 28px ;}

Note that the order of the two margin cannot be reversed ,! The important attribute IE cannot be identified, but other browsers can. So in IE, it is actually explained as follows:

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

If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: XXpx! Important;

Browser differences
1. Questions about ul and ol list indentation

When the indentation of ul and ol lists is eliminated, the style should be written as: list-style: none; margin: 0px; padding: 0px;
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 indentation, white spaces, list numbers, or dots from the top, bottom, and right of the list. Setting padding does not affect the style. In Firefox, setting margin: 0px can only remove the upper and lower spaces. After setting padding: 0px, only the left and right indentation can be removed. You must also set list-style: none to remove list numbers or dots. In other words, you can set only margin: 0px in IE to achieve the final effect. In Firefox, you must set both margin: 0px, padding: 0px, and list-style: none can achieve the final effect.

2. CSS transparency

IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
FF: opacity: 0.6.
[Note] it is best to write both of them and put the opacity attribute below.

3. CSS rounded corners

IE: ie7 or earlier versions do not support rounded corners.
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] the rounded corner problem is a classic issue in CSS. We recommend that you use the JQuery framework set to set the rounded corner so that you can leave these complicated problems for others to think about. However, jQuery only supports rounded corners of the entire area and does not support rounded corners of the border. However, the rounded corners of this border can be achieved through some simple means. Next time you will have the opportunity to introduce it.

4. cursor: hand VS cursor: pointer

Problem description: firefox does not support hand, But ie supports pointer. Both are hand-shaped indicators.
Solution: Use pointer in a unified manner.

5. Different font size definitions

The font size of small is defined differently. Firefox is 13px, While IE is 16px. The difference is quite large.

Solution: Use the specified font size, such as 14px.

The div and div of multiple elements (images or links) arranged in parallel are ignored in firefox, in IE, spaces (about 3px) are displayed by default ).

6. CSS double-line concave and convex border
IE: border: 2px outset ;.
FF:-moz-border-top-colors: # d4d0c8 white;-moz-border-left-colors: # d4d0c8 white;-moz-border-right-colors: #404040 #808080;-moz-border-bottom-colors: #404040 #808080;

Browser bug
1. IE bilateral distance bug

The div set to float doubles the margin set in ie. This is a bug in ie6.

Solution: Add display: inline In the div;

For example:

<# Div id = "imfloat">

The corresponding css is

Reference content is as follows:

Copy to ClipboardReference: [www.bkjia.com] # IamFloat {
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */
}

There are too many questions about CSS, and even the display effects of the same CSS definition in different page standards are different. A developing suggestion is that the pages are written in the standard XHTML standard, and table is rarely used. CSS definition should follow the standard DOM as much as possible, while taking into account mainstream browsers such as IE, Firefox, and Opera. In many cases, FF and Opera's CSS interpretation standards are closer to CSS standards and more normative.

2. Space BUG in IE Selection

Today, when setting the first character style for the paragraph style of the blog, we found that a space can also invalidate the style.

See the following code:

Copy to ClipboardReference: [www.bkjia.com] <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "// www.w3.org/5o/xhtml">
<Head>
<Title> </title>
<Style type = "text/css">
<! --
P {font-size: 12px ;}
P: first-letter {font-size: 300%}
-->
</Style>
</Head>
<Body>
<P> you are a person in the world, but you are a person in the whole world. Never frown even when you are sad, because you don't know who will fall in love with your smile. </P>
</Body>
</Html>

This Code defines the first character style of <p> in IE6, Which is ineffective (IE7 is not tested), but in p: first-letter and {font-size: 300%} with a space, that is, p: first-letter {font-size: 300%}, the display is normal. But the same code is normal in FireFox. In principle, p: first-letter {font-size: 300%} is correct. So where is the problem? The answer is "-" in a 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 style definition will be invalid. In FF, the processing can be done without spaces.