Analysis on CSS incompatibility in IE6, IE7, and IE8 browsers

DIV dislocation in IE6

The DIV using "FLOAT: LEFT" has no problem in IE8, IE7, but moves down in IE6, leading to a blank space. This is because the Kernel used by IE6 increases the distance between divs by 3 by default ~ 5 PX, so try to add "margin-left:-5px;" or smaller to the STYLE of the moving DIV.
Solve the style incompatibility problem of IE7 and IE8

Method 1: Add the following HTTP meta-tag to the page:
<Meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7"/>

As soon as IE8 reads this label, it automatically starts the IE7 compatibility mode to ensure the full display of the page.

Method 2: Add the following descriptor to IIS for the entire website to achieve the same effect. Of course, this is a wider range.

<? Xml version = "1.0" encoding = "UTF-8"?>
<Configuration>
<System. webServer>
<HttpProtocol>
<CustomHeaders>
<Add name = "X-UA-Compatible" value = "IE = EmulateIE7">
</CustomHeaders>
</HttpProtocol>
</System. webServer>
</Configuration>

Solve the incompatibility problem of IE6, IE7, and IE8 styles

At present, we always need to consider compatibility issues between browsers when making web pages. I am working on a short message Platform project recently. One of the headaches I encountered during project development is that IE7 is incompatible with IE8. I thought about many solutions later. The share is as follows:

If your page is compatible with IE7, and you do not want to modify the existing code in large quantities, and can be used normally in IE8, Microsoft claims that, the developer only needs to add a line of code to the website currently compatible with Internet Explorer 7 to solve the problem. The Code is as follows:

CODE:

<Meta http-equiv = "x-ua-compatible" content = "ie = 7"/>

 

Solve the css style compatibility problem of firefox ie6 ie7

The most troublesome theme is CSS style compatibility. Due to the different interpretations of ccs by various browsers, IE7 can be displayed normally, but on Firefox, ie6, and other browsers, but there are dislocation, sinking and other problems, so I had to switch debugging between Firefox, ie6, and ie7 without stopping, Khan... Recently, two other browsers have been added to Google Chrome and IE8. A single browser seems to have no hope but to overcome compatibility issues as much as possible. It is quite effective to find an article on compatibility issues.

1. 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 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. Now you can write a CSS file like this:

#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 for the box model.

# Box {

Width: 600px;

// For ie6.0-w \ idth: 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 characteristics of the Inline element are: 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 place <div> under the <body> label and specify a class for div:

Then CSS is designed like this:

# Container {

Min-width: 600px;

Width: e-xpression (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.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page