CSS compatibility between IE and Firefox

CSS has a high value for the compatibility of browsers. In general, there is a great difference between IE and Firefox. Here we will introduce the compatibility points.

FAQs:

1. DOCTYPE affects CSS Processing

2. FF: div sets margin-left and margin-right to auto.
Is already centered, IE does not work

3. FF: when setting text-align for the body, set margin for the div:
Auto (mainly margin-left, margin-right) can be centered

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

5. FF: supported! Important, IE is ignored, available! Important is FF
Special settings

6. vertical-align: middle;
Increase the line spacing to the same height as the entire DIV line-height: 200px. Then insert the text to center vertically. The disadvantage is that you need to control the content instead of line feed.

7. cursor: pointer can display the cursor finger in ie ff at the same time, hand only IE
Yes

8. FF: add the border and background color to the link. Set display: block and float:
Left ensures no line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can
Insert a space.

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 the two margin entries must not be reversed. According to Alibaba Cloud! 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;

10. The BOX interpretations of IE5 and IE6 are inconsistent.

Under IE5

Div {width: 300px; margin: 0 10px 0 10px ;}

The div width is interpreted as 300px-10px (right fill)-10px (left fill). The final div width is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can make the following changes:

Div {width: 300px! Important; width/**/: 340px; margin: 0
10px 0 10px}

I don't quite understand what/**/is. I only know that both IE5 and firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

11. ul labels have padding values by default in Mozilla, while in IE, only margin has a value, so we first define

Ul {margin: 0; padding: 0 ;}

Most problems can be solved.

Note:

1. The div of float must be closed.

Example: (floatA and floatB attributes have been set to float: left ;)

<# Div id = "floatA"> </# div>

<# Div id = "floatB"> </# div>

<# Div id = "NOTfloatC"> </# div>

The NOTfloatC here does not want to continue translation, but wants to move down.

This code has no problem in IE, and the problem lies in FF. The reason is that NOTfloatC is not a float label and must be closed.

In

<# Div class = "floatB"> </# div>

<# Div class = "NOTfloatC"> </# div>

Add

<# Div class = "clear"> </# div>

This div must pay attention to the declaration position. It must be placed in the most appropriate place and must be at the same level as two div with the float attribute. No nested relationship exists between them; otherwise, an exception may occur.

And define the clear style as follows:

. Clear {

Clear: both ;}

In addition, in order to automatically adapt to the height, overflow: hidden should be added to the wrapper;

When a box containing float is automatically adapted to the IE environment, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility.

For example, a wrapper is defined as follows:

. Colwrapper {

Overflow: hidden;

Zoom: 1;

Margin: 5px auto ;}

2. The problem of doubling margin.

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

The solution is to add the display: inline In the div;

For example:

<# Div id = "imfloat"> </# div>

The corresponding css is

# IamFloat {

Float: left;

Margin: 5px;/* 10 Px in IE */

Display: inline;/* in IE, It is understood as 5px */}

3. Container inclusion relationships

In many cases, especially when the container has a parallel layout, such as two or three float Divs, the width is prone to problems. In IE, the width of the outer layer is broken by the div with a wider inner layer. You must use Photoshop or Firework to obtain pixel-level precision.

4. Questions about height

If the content is added dynamically, it is best not to define the height. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on)

5. the most cruel means -! Important;

If there is no way to solve some detailed problems, you can use this method. FF "! Important will automatically give priority to resolution, but IE will ignore it.

. 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 xxxx must be added! Important is placed on the other sentence, which has been mentioned above

 

Compatibility of Firefox and IE with CSS

1. firefox and IE have many differences in the identification of some css styles, including:

The default padding values of ul and ol are different. In Firefox, the default value of padding-left is about 40 PX, while that of IE is 0. Generally, ul {margin: 0; padding: 0;} solves most problems.

Spaces and carriage returns in the code of multiple elements (images or links) in the parallel arrangement may cause gaps between elements, which are different in firefox and IE, IE (about 8px) and firefox (about 4px ).

The compatibility with nonstandard code is different. The closed symbols missed in IE do not affect the display, and firefox will form a disordered layout.
Strict parsing of the width and height of firefox will result in an image or table that does not match the setting (beyond.

The div with an undefined id is related to other settings in the div property in IE, and the position in firefox is related to the position of the div in the file, followed by the previous div.
The div set to float doubles the margin set in ie, especially the margin-left, which is a bug in ie6. The solution is to add the display: inline In the div;

If the content is added dynamically, it is best not to define the height. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on)

FF: When div sets margin-left and margin-right to auto, it is already centered, IE
No. In IE, text-align: center is set, but not in FF. Therefore, you must set both of them.
FF: After padding is set, the div will add
Height and width, but IE does not, so you need to use it! Set one more height and width for important.

FF "! Important will automatically give priority to resolution, but IE will ignore it.
. Tabd {
Background: url (/res/images/up/tab1.gif)
No-repeat 0px 0px! Important;/* Style
FF */
Background: url (/res/images/up/tab1.gif) no-repeat 1px 0px;/* Style
IE */
}

FF: adds a border and a background color to the link. You must set display: block and float: left.
Ensure no line breaks.

2. css style for firefox ie6 ie7

Most of them are used now! Important comes to hack. It can be displayed normally for ie6 and firefox tests,
But ie7! Important can be correctly explained, and the page will not be displayed as required! Find a needle
The good hack Method for IE7 is to use "* + html". Now you can use IE7 to browse it. It should be okay.

You can write a CSS file as follows:

#1 {color: #333;}/* Moz */
* Html #1 {color:
#666;}/* IE6 */
* + Html #1 {color: #999;}/* IE7 */

The font color in firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999.

3. When multiple layers are nested in firefox, the background is not displayed when the floating outer layer is set in the inner layer.
This is mainly because the height of the outer layer changes to 0 in firefox after the inner layer is set to float. Therefore, an additional layer should be embedded between the outer layer and the inner layer to set the float and width.
Degrees, and then set the background for this layer (I heard there are other methods, I feel this method is better)

4. Attribute selector (this is incompatible and is a bug in hiding css.
P [id] {} div [id] {}
This is hidden for versions earlier than IE6.0 and IE6.0. It is used by FF and OPera.
There is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in p [id, all p tags have IDs in the same style.

5. nested DIV: the height of the parent DIV cannot be automatically changed based on the Child DIV.

<Div id = "parent">
<Div id = "content">
</Div>
</Div>

When the Content is too large, even if the parent is set to a height of 100% or auto, it cannot be automatically stretched in different browsers.
Solution

<Div id = "parent">
<Div id = "content"> </div>
<Div
Style = "font: 0px/0px sans-serif; clear: both; display: block">
</Div>
</Div>

A space with a height of 1 is generated at the bottom of the layer to solve this problem.