Shulou(Shulou.com)06/02 Report--

How to solve the IE6, IE7, IE8 style incompatibility problem, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Here and everyone to discuss how to solve the problem of IE6, IE7, IE8 DIV dislocation, if your page is compatible with IE7 without a problem, and do not want to modify a large number of existing code, and at the same time can be used normally in IE8, Microsoft claims that developers only need to add a line of code on the current compatible IE7 website to solve the problem, which is very convenient.

The problem of DIV dislocation in IE6

The DIV with "FLOAT:LEFT" has no problem in IE8, IE7, but moves down under IE6, resulting in a blank. This is because the kernel used by IE6 increases the distance between DIV by 3 to 5 PX by default, so try adding "margin-left:-5px;" or less to the STYLE of the downward DIV.

Solve the incompatibility of IE7 and IE8 styles

◆ method 1. Add the following HTTPmeta-tag to the page:

As soon as IE8 reads this tag, it automatically starts IE7 compatibility mode to ensure that the page is fully displayed.

◆ method 2, for the entire site, add the following descriptors to the IIS can have the same effect, of course, to do so in a wider range.

CustomHeaders > httpProtocol > system.webServer > configuration >

Solve the incompatibility of IE6, IE7 and IE8 styles

Now we always have to consider the compatibility between browsers when we are doing web pages. Recently, I am working on a project of SMS platform. One of the headaches I encountered during the development of the project was that IE7 was not compatible with IE8. After thinking of a lot of ways to solve it. The shares are as follows:

If your page is compatible with IE7 and doesn't want to modify a lot of existing code, while working normally in IE8, Microsoft claims that developers only need to add a line of code to the current IE7-compatible website to solve the problem, as follows:

CODE:

Solve the css style compatibility of Firefox, IE6 and IE7

The most troublesome thing about making a theme is the compatibility of CSS styles. Due to the different interpretations of ccs in different browsers, IE7 can be displayed normally, but on other browsers such as Firefox and IE6, there are some problems such as dislocation and sinking, so you have to switch and debug constantly between Firefox, IE6 and IE7. Recently, two more browsers have joined googleChrome and IE8. It seems hopeless for a browser to dominate the world, and it can only overcome the compatibility problem as much as possible. It is very effective to find an article to solve the compatibility problem.

1. CSS style for FirefoxIE6IE7

Now most of them use! important to hack, for IE6 and Firefox tests can be displayed normally, but IE7 to! important can be explained correctly, will cause the page not to display as required! To find a good hack method for IE7 is to use "* + html". Now browse it with IE7. There should be no problem. Now you can write a CSS like this:

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

Then the font color is displayed as # 333 under Firefox, the font color is displayed as # 666 under IE6, and the font color is displayed as # 999 under IE7.

The problem of centering in 2.css layout

The main style definitions are as follows:

Body {TEXT-ALIGN:center;} # center {MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}

Description:

First of all, defining TEXT-ALIGN:center; in the parent element means that the content in the parent element is centered; for IE, this setting is fine.

But it cannot be in the middle in mozilla. The solution is to add "MARGIN-RIGHT:auto;MARGIN-LEFT:auto;" when the child element is defined.

It is important to note that if you want to use this method to center the entire page, it is recommended not to be in a DIV, you can remove multiple div in turn, as long as you define MARGIN-RIGHT:auto;MARGIN-LEFT:auto; in each div.

3. The box model is interpreted differently.

# box {width:600px; / / forIE6.0-w\ idth:500px; / / forff+IE6.0} # box {widthParse 600pxpackages / / forff width:600px; / / forff+IE6.0 width/**/:500px; / / forIE6.0-}

4. Double distance generated by floating IE

# box {float:left;width:100px;margin:000100px;// in this case the IE will generate the distance display:inline;// of the 200px to make the float ignore}

Here, let's talk about the two elements of block,inline in detail. The characteristic of the Block element is that it always starts on the new line, and the height, width, line height and margin can be controlled (block element). The characteristic of the Inline element is that it is on the same line as other elements. Uncontrollable (embedded element)

# box {display:block;// can simulate an embedded element as a block element display:inline;// to achieve the effect of arranging on the same line diplay:table

5.IE and width and height problems

IE doesn't recognize the definition of min-, but in fact it treats normal width and height as if there were min. This is a big problem. If you only use width and height, these two values will not change in normal browsers. If you only use min-width and min-height, the width and height will not be set under IE at all. For example, to set the background picture, this width is more important. To solve this problem, you can do this:

# box {width:80px;height:35px;} html > body#box {width:auto;height:auto;min-width:80px;min-height:35px;}

6. The minimum width of the page

Min-width is a very convenient CSS command that specifies that the element must not be less than a certain width, so that typesetting is always correct. But IE doesn't recognize this, and it actually uses width as the minimum width. To make this command work on IE, you can use a

Put it under the tag and specify a class for div:

Then CSS designed it like this:

# container {min-width:600px; width:e ­xpression (document.body.clIEntWidth DIV > DIV >

9. Property selector (this is not compatible, it is a bug that hides css)

P [id] {} div [id] {} p [id] {} div [id] {}

This is hidden for versions below IE6.0 and IE6.0, FF and OPera functions

There is a difference between attribute selector and sub-selector, the scope of sub-selector is narrowed in terms of form, and the scope of attribute selector is larger, such as p [id], all p tags with id are the same.

The problem of 10.IE playing hide-and-seek

When the div application is complex, there are some links in each column, such as DIV, it is easy to play hide-and-seek.

Some of the content cannot be displayed, and when the mouse selects this area, it is found that the content is indeed on the page.

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

11. Highly inadaptable

Height inadaptability means that the outer height cannot be adjusted automatically when the height of the inner object changes, especially when the inner object is used

Margin or paddign. Example:

Content in p object p > div > CSS: # box {background-color:#eee;} # boxp {margin-top:20px;margin-bottom:20px;text-align:center;}

Solution: add 2 empty div object CSS codes above and below the P object:. 1 {height:0px;overflow:hidden;} or add the border attribute to the DIV.

Note: IE can recognize *; standard browsers (such as FF) can not *

IE6 can recognize _, but not others.

IE6 can recognize *, can also recognize! important, but can not recognize it as a priority

IE7 can recognize *, can also recognize! important

FF does not recognize *, but can recognize! important

After reading the above, do you know how to solve the incompatibility of IE6, IE7 and IE8 styles? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.