Browser compatibility issues during div css layout_html/css_WEB-ITnose

As the market share of Firefox increases, IE declines, especially in Europe, where Firefox has a higher market share. Without a unified Under the standard, browser compatibility issues have become more and more important. Sometimes it looks fine under IE, but it is completely different in Firefox or other browsers. At that time, I feel very unhappy and frustrated!

The most commonly used method when distinguishing between Firefox and IE is the !important method. For compatibility issues with different browsers and different versions of the browser, there are also the following methods, such as: @import, comments, attribute selectors, sub- Methods such as object selector and voice-family are described in "Css Website Layout Record".

The following are the CSS compatibility issues of IE and Firefox

1. DOCTYPE affects CSS Processing

2.FF: When the div is set to margin-left and margin-right to auto, it is already centered, but IE does not work

3.FF: When the body is set to text-align, the div needs to set margin: auto (mainly margin-left, margin-right) can be centered

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

5.FF: supports !important, IE ignores it, you can use !important to set a special style for FF. It is worth noting that the xxxx !important sentence must be placed above another sentence

6.div’s vertical centering problem: vertical-align:middle; Increase the line spacing to the same height as the entire DIV, line-height:200px; and then insert text, and it will be vertically centered. The disadvantage is that the content must be controlled without wrapping

7.cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be used by IE

8.FF: link with border and background color, You need to set display: block and 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 difference of 2px. Solution: div{margin:30px!important;margin:28px;}
Note that the order of these two margins must not be Wrote it backwards, 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 the definition is repeated, the last one will be executed, so you cannot just write margin:XXpx!important;

10. The BOX interpretation of IE5 and IE6 is inconsistent
Under IE5 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.ul tag has padding value by default in Mozilla, but in IE only margin has value, so first define ul{margin:0;padding:0;}
to solve the problem Most of the problems

　
Notes:

1. The float div must be closed.

For example: (where the attributes of floatA and floatB have been set to float:left;)<#div id="floatA" >
<#div id="floatB" >
<#div id=”NOTfloatC” >
The NOTfloatC here does not want to continue to pan, but wants to be arranged downwards.
This code has no problem in IE, the problem lies in FF. The reason is that NOTfloatC is not a float label, and the float label must be closed.
Add <#div class=”clear”>
between <#div class=”floatB”>
<#div class=”NOTfloatC”>
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. There cannot be a nested relationship between them, otherwise an exception will occur.
And define the clear style as follows: .clear{
clear:both;}

In addition, in order to allow the height to automatically adapt, add overflow in the wrapper: hidden;
When a box contains a float, automatic height 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 this. compatible.
For example, a wrapper is defined as follows: .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:
<#div id="imfloat">

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

3. About the inclusive relationship of containers

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.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, must Place the xxxx !important sentence above another sentence. As mentioned above

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

Now I mostly use !important Hack, for IE6 and Firefox tests, it can be displayed normally, but IE7 can correctly interpret !important, 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:
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
* html #example { color: #999; } /* IE7 */

Then the font color under firefox is displayed as #333, the font color under IE6 is displayed as #666, and the font color under IE7 is displayed as #999, they don't interfere with each other. I really hope that crappy IE6 is retired soon. . . .