Differences in DIV support between IE6, IE7 and Firefox_Experience exchange

1 CSS styles for firefox ie6 ie7

Now most of them use !important to hack. For ie6 and firefox tests, it can be displayed normally, but ie7 can correctly interpret !important. This will cause the page not to be displayed as required! 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:

#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 under IE7 The color appears as #999.

2 Centering issues in css layout

The main style definitions are as follows:

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

Explanation:

First define TEXT-ALIGN: center in the parent element; this means that in the parent element The content inside is centered; this setting is enough for IE.

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

It should be noted that if you want to use this method to center the entire page , it is recommended not to wrap it in a DIV. You can split out multiple divs in sequence, just define MARGIN-RIGHT: auto;MARGIN-LEFT: auto; in each split div.

3 Different interpretations of 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 generated by floating ie
#box{ float:left; width:100px; margin:0 0 0 100px; //In this case, IE will generate a distance of 200px display:inline; //Ignore the float}
Let’s talk about the two elements block and inline in detail. The characteristics of the Block element are: it always starts on a new line, and the height, width, line height, and margins can all be controlled (block element); the characteristics of the Inline element are: On the same line as other elements,... cannot be controlled (inline elements);

#box{ display:block; //Can simulate inline elements as block elements display:inline; //Implementation The effect of arranging in the same row diplay:table;

5 Problems with IE and width and height

IE does not recognize the definition of min-, but in fact it Normal width and height are used as if there is min. This is a big problem. If you only use width and height, these two values ​​​​will not change in a normal browser. If you only use min-width and min-height, the width and height are not set at all under IE. For example, if you want to set a background image, 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. It can specify that the minimum width of the element cannot be less than a certain width, so This ensures that the typesetting is always correct. But IE doesn't recognize this, and it actually treats width as the minimum width. In order to make this command work on IE, you can put a

under the tag, and then specify a class for the div:
Then the CSS is designed like this:

#container{
min-width: 600px;
width:expression(document.body.clientWidth }

The first min-width is Normal; but the width in line 2 uses Javascript, which is only recognized by IE, which will also make your HTML document less formal.It actually implements the minimum width through Javascript judgment.

7 Clear float

.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 that occurs after the object, Usually used in conjunction with content, IE does not support this pseudo object and is 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 DIV floating IE text produces a 3-pixel bug

The left object floats, the right uses Positioned by the left margin of the outer patch, the text within the right object will be 3px 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
}
HTML code

9 Attribute selector (this is not compatible, it is a bug in hiding css)

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

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

There is still a difference between attribute selectors and sub-selectors. The scope of sub-selectors is narrowed in form, while the scope of attribute selectors is relatively large. For example, in p[id], all p tags have The ids are all in the same style.

10 IE hide-and-seek problems

When the div application is complex, there are some links in each column, such as DIV Sometimes hide-and-seek problems easily occur.
Some content cannot be displayed. When the mouse selects this area, it is found that the content is indeed on the page.
Solution: Use line-height attribute for #layout or use fixed height and width for #layout. Keep the page structure as simple as possible.

11 Height incompatibility

Height incompatibility means that when the height of the inner object changes, the height of the outer layer cannot be automatically adjusted, especially when the height of the inner object changes. When using
margin or paddign. Example:

Content in p object

CSS:

#box {background-color:#eee; } 
#box p {margin-top: 20px; margin-bottom: 20px; text-align:center; }

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