[Transfer] Summary of CSS browser compatibility issues_html/css_WEB-ITnose

CSS compatibility issues between E6.0, ie7.0 and Firefox 1. DOCTYPE affects CSS processing
2. FF: div is already centered when margin-left and margin-right are set to auto , IE does not work
3.FF: When setting text-align on the body, the div needs to set margin: auto (mainly margin-left, margin-right) to be centered
4.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
5.FF: !important is supported, but IE ignores it. You can use !important to set a special style for FF. It is worth noting that, Be sure to place the xxxx !important sentence above another sentence
6. 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 text, It's centered vertically. The disadvantage is that it is necessary to control the content without wrapping
7. cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be used in IE
8. FF: Links add borders and background colors, need to set display: block, At the same time, set float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, a space can be inserted in menubar.
9. 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 these two margins must not be reversed. According to Ajie, the !important attribute cannot be recognized by IE, but other browsers can. 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;

10. The BOX interpretation of IE5 and IE6 is inconsistent
Under IE5, the width of div{width:300px;margin:0 10px 0 10px;}
The width of the div will be interpreted as 300px-10px (right padding)-10px (left padding) finally The width of the div is 280px, but on IE6 and other browsers, the width is calculated as 300px 10px (right padding) 10px (left padding) = 320px. At this time we can make the following changes to div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
　About this/**/. I don’t quite understand what it is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands it, please Tell me, thanks! :)

11. The ul tag has a padding value by default in Mozilla, but in IE only margin has a value, so define ul{margin:0;padding:0;}
first to solve the problem Most problems


Notes:

1. The float div must be closed.

　For example: (The attributes of floatA and floatB have been set to float:left;)


　NOTfloatC here does not want to continue to translate, but wants to move down.
This code has no problem in IE, but the problem lies in FF. The reason is that NOTfloatC is not a float label, and the float label must be closed.
Add
between

This div must pay attention to the declaration position and must be placed in the most appropriate place. It must be at the same level as the two divs with float attributes and cannot be between them. There is a nested relationship, otherwise an exception will be generated.
And define the clear style as follows: .clear{
clear:both;}
In addition, in order to allow the height to automatically adapt, add overflow:hidden; When a box containing a float is used, the height automatic adaptation is invalid under IE. At this time, the layout private attribute of IE should be triggered (the evil IE!). You can use zoom:1; to achieve compatibility.
For example, a wrapper is defined as follows:

Program code

.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

2. The problem of doubling margin.

The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6.
The solution is to add display: inline;
to this div. For example:



The corresponding css is

Program code

#IamFloat{
float:left;
margin:5px;/*under IE, it is understood as 10px*/
display:inline;/*under IE, it is understood as 5px*/ }

3. Regarding the inclusive relationship of the container

Many times, especially when there is a parallel layout in the container, such as two or three float divs, the width is prone to problems. In IE, the width of the outer layer will be squeezed by the wider inner div. Be sure to use Photoshop or Firework to measure with pixel-level accuracy.

4. Questions about height

If content is added dynamically, it is best not to define the height. Browsers can automatically scale, but if it is static content, it is best to set the height. (It seems that sometimes it won’t open automatically, I don’t know what’s going on)

5. The most ruthless method - !important;

If there is really no way to solve some detailed problems, You can use this method. FF will automatically parse "!important" first, but IE will ignore it. As follows

Program code

.tabd1{
background :url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

It is worth noting that the sentence xxxx !important must be placed above another sentence, as mentioned above



IE7.0 is out, and there are new problems with CSS support. There are more browsers, and web page compatibility is getting worse. We are still struggling. In order to solve the compatibility problem of IE7.0, I found the following article:


Now I mostly use !important comes as a hack, and it can be displayed normally in ie6 and firefox tests, but ie7 can interpret !important correctly, which will cause the page not to be displayed as required! After searching, I found a good hack for IE7 which is to use "* html". Now browse it with IE7 and there should be no problem.

Now write a CSS like this:

Program code

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
* html #example { color: #999; } /* IE7 */

Then the font color is displayed as #333 under Firefox, #666 under IE6, and #999 under IE7. They do not interfere with each other.