Introduction to multi-browser compatibility issues and solutions using CSS

Compatibility processing points
1. DOCTYPE affects CSS processing

2. FF: After setting padding, the div will increase height and width, but IE does not, so you need to use !important to set an additional height and width

3. FF: supports !important, but IE ignores it. You can use !important to set a special style for FF

4. Vertical centering 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 it will be vertically centered. The disadvantage is that the content must be controlled not to wrap.

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

div{margin :30px!important;margin:28px;}

Note that the order of these two margins must not be reversed, !important this attributeIE cannot recognize it, but other browsers can be identified. So it is actually interpreted like this under IE:

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

If you repeat the definition, it will be executed according to the last one, so you cannot just write margin:XXpx!important ;

Browser differences
1. Indentation problem of ul and ol lists

When eliminating the indentation of ul, ol and other lists, 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 the upper, lower, left and right indents, blanks, and list numbers or dots of the list. Setting padding has no effect on the style; in Firefox, setting margin :0px can only remove the top and bottom spaces. Setting padding:0px can only remove the left and right indents. You must also set list-style:none to remove list numbers or dots. In other words, in IE, only margin:0px can be set to 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. CSS transparency issue

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

3. CSS rounded corners problem

IE: Versions below ie7 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 problem in CSS. It is recommended to use the JQueryframework set to set the rounded corners, leaving these complex issues to others to think about. However, jQuery's rounded corners only support the rounded corners of the entire area and do not support the rounded corners of the border. However, the rounded corners of this border can be achieved through some simple means. I will introduce it next time.

4. cursor:hand VS cursor:pointer

Problem description: Firefox does not support hand, but IE supports pointer, both are hand instructions.
Solution: Use pointer uniformly.

5. Different definitions of font size

The definition of font size small is different. It is 13px in Firefox and 16px in IE. The difference is quite big.

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

Between divs and divs of multiple elements (picturesor links) arranged side by side, spaces and carriage returns in the code will be ignored in Firefox, but will be displayed by default in IE is space (about 3px).

6. CSS double-line bump 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 double margin bug

The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6.

Solution: Add display:inline; inside this div

For example:

dcb9747e38711bafad73ca1c45a03560

The corresponding css is

The following is the content of quote:

#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
} 
#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/ 
}

There are too many problems in CSS, even the same CSS definition The display effects in different page standards are different. A suggestion that is in line with development is that the page should be written using standard XHTML standards, with less use of tables, and CSS definitions should be based on the standard DOM as much as possible, taking into account mainstream browsers such as IE, Firefox, and Opera. In many cases, the CSS interpretation standards of FF and Opera are closer to the CSS standards and more normative.

2. IE selector space BUG
Today when I was setting the first character style for the blog paragraph style, I discovered that a space can also invalidate the style.

Please look at the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
p{font-size:12px;} 
p:first-letter{font-size:300%} 
--> 
</style> 
</head> 
<body>

e388a4556c0f65e1904146cc1a846beeTo the world, you are one person; but to someone, you are his entire world. Even if you are sad, don't frown, because you don't know who will fall in love with your smile. 94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
[/code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
<!-- 
p{font-size:12px;} 
p:first-letter{font-size:300%} 
--> 
</style> 
</head> 
<body> 
对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。
 
 

This code defines the first character style of e388a4556c0f65e1904146cc1a846bee in IE6 It seems to have no effect (IE7 has not been tested), and after adding a space to p:first-letter and {font-size:300%}, that is, p:first-letter {font-size:300%}, it is displayed It's normal. But the same code looks normal under FireFox. Logically speaking, the way of writing p:first-letter{font-size:300%} is correct. So what's the problem? The answer is the hyphen "-" in pseudo-class . There is a BUG in IE. When processing pseudo-classes, if the name of the pseudo-class contains a hyphen "-", the name of the pseudo-class must be followed by a space, otherwise the style definition will be invalid. In FF, it can be processed normally with or without spaces.

The above is the detailed content of Introduction to multi-browser compatibility issues and solutions using CSS. For more information, please follow other related articles on the PHP Chinese website!