Differences between Firefox and IE in CSS style interpretation

Differences between Firefox and IE on CSS Styles 1. CSS styles 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 is correct! Important can be correctly explained, and the page will not be displayed as required! If you find a good hack Method for IE7, you can 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.

2. center problem in CSS layout

The main style definition is as follows:

Body {text-align: center ;}
# Center {margin-Right: auto; margin-left: auto ;}

Note:

First, define text-align: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough.

However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;"

It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple divs in sequence, you only need to define margin-Right: auto; margin-left: auto; in each split Div.

3. Different explanations of the Box Model

# Box {
Width: 600px;
// For ie6.0-width: 500px;
// For FF + ie6.0
}
# Box {
Width: 600px! Important
// For FF
Width: 600px;
// For FF + ie6.0
Width/**/: 500px;
// For ie6.0-
}

4. Double distance of floating IE

# Box {float: Left; width: 100px; margin: 0 0 0 100px; // in this case, ie will generate a PX distance display: inline; // ignore floating}

Here, let's take a closer look at the block and inline elements. The characteristics of the block elements are that they can always start on a new line, and the height, width, row height, and margins can be controlled (block elements ); the features of the inline element are as follows: On the same line as other elements ,... uncontrollable (embedded element );

# Box {display: block; // The embedded element can be simulated as the block element display: inline; // the result of the same row arrangement is dilay: Table;

5. Questions about IE and width and height

IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all. For example, to set a background image, the width is important. To solve this problem, you can:

# Box {width: 80px; Height: 35px;} HTML> body # box {width: auto; Height: auto; Min-width: 80px; Min-Height: 35px ;}

6. Minimum page width

Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this, but it actually uses width as the minimum width. To enable this command to be used on IE, you can
Put it under the tag and specify a class for the DIV:

Then CSS is designed like this:

# Container {
Min-width: 600px;
Width: expression (document. Body. clientwidth <600? "600px": "Auto ");
}

The first Min-width is normal, but the width of line 2nd uses JavaScript, which is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through javascript judgment.

7. Clear floating

. Hackbox {
Display: Table;
// Display the object as a table at the Block Element Level
}

Or

. Hackbox {
Clear: both;
}

Or add: After (pseudo object) to set the content after the object, which is usually used with content. ie does not support this pseudo object, not supported by IE browsers, so it does not affect IE/win browsers. This is the most troublesome

... # Box: After {
Content :".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden;
}

8. The DIV floating ie text generates a 3-pixel bug

The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px away from the left.

# Box {
Float: left;
Width: 800px ;}
# Left {
Float: left;
Width: 50% ;}
# Right {
Width: 50%;
}
* Html # Left {
Margin-Right:-3px;
// This sentence is the key
}

HtmlCode

9. Attribute selector (this is incompatible and is a bug in hiding CSS)

P [ID] {} Div [ID] {}
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.

10. Questions about Internet Explorer

When the DIV application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.

Some content cannot be displayed. When you select this area, the content is displayed on the page.

Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.

11. highly unsuitable

The height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses

Margin or paddign. Example:

Content in object P

CSS:

# Box {background-color: # Eee ;}
# Box P {margin-top: 20px; margin-bottom: 20px; text-align: center ;}

Solution: Add two empty Div objects to the upper and lower sides of the P object. CSS code:. 1 {Height: 0px; overflow: hidden;} or add the border attribute to the div.

######################################## ###############################
######################################## ###############################

FAQs:

1. doctype affects CSS Processing

2. FF: When Div sets margin-left and margin-Right to auto, it is already centered, and IE does not work.

3. FF: when setting text-align for the body, set margin: auto (mainly margin-left, margin-Right) for the DIV to be centered.

4. 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.

5. FF: supported! Important, ie is ignored, available! Important sets a special style for FF

6. 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 to the vertical center. The disadvantage is that you need to control the content rather than line feed.

7. cursor: pointer can display the cursor finger in IE ff at the same time. Hand can only be IE

8. FF: adds a border and a background color to the link. You must set display: block and float: left to avoid 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 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 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 ;)
& Lt; # Div id = & quot; floata & quot; & gt; & lt;/# Div & gt;
& Lt; # Div id = & quot; floatb & quot; & gt; & lt;/# Div & gt;
& Lt; # Div id = & quot; notfloatc & quot; & gt; & lt;/# Div & gt;
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
& Lt; # Div class = & quot; floatb & quot; & gt; & lt;/# Div & gt;
& Lt; # Div class = & quot; notfloatc & quot; & gt; & lt;/# Div & gt;
Add
& Lt; # Div class = & quot; clear & quot; & gt; & lt;/# Div & gt;
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:

& Lt; # Div id = & quot; imfloat & quot; & gt; & lt;/# Div & gt;

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 details, you can use this method. ff For & quot ;! Important & quot; 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.

! Important is the syntax defined in css1 and improves the application priority of a specified style rule (see the w3.org interpretation ).
Syntax format {srule! Important} is written at the end of the definition, for example:
Box {color: red! Important ;}
The most important thing is that IE does not support this syntax all the time, but other browsers do. Therefore, we can use this to define different styles for IE and other browsers. For example, we define a style like this:
. Colortest {
Border: 20px solid #60a179! Important;
Border: 20px solid # 00f;
Padding: 30px;
Width: 300px;
}
It can be understood when browsing in Mozilla! Important priority, so the color of #60a179 is displayed:
Cannot be understood when browsing in IE! Important priority, so the color of # 00f is displayed:
You can see, use! Important, we can set different styles for IE and non-ie browsers, as long as it is added after the style of the non-IE browser! Important. Therefore, the 2px display difference on my homepage mentioned above can be easily solved:
Padding-top: 11px! Important;
Padding-top: 9px;
! Important must be a powerful CSS layout tool. Please remember and master it :)