1. Different interpretations of box interpreters. #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-
}
2. To hide css in IE, use the sub-selector
html>body #box{ }
3, only recognized by IE
*html #box{ }
4. Valid in ie/win but hidden in ie/max, use backslash
5. Define the style separately for ie
6. 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 floats
}
Let’s talk about the two elements block and inline in detail here. 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 elements); the characteristics of the Inline element are: and Other elements are on the same line,... cannot be controlled (inline elements);
#box{
display:block; //Can simulate inline elements as block elements
display:inline; //Achieve the effect of arranging in the same line
diplay:table; //for ff, simulate the effect of table
}
7,for oprea only
@media all and (min-width:0px){
#box{ }
}
8. Problems with IE and width and height
IE does not recognize the definition of min-, but in fact it treats normal width and height as if there is a min. This will be 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, it means that 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;
}
9. 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 as to ensure 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 also available on IE, you can put it under the <body> tag, and then specify a class for the div. The 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 in the second line 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.
The same method can also be used to achieve the maximum width for IE:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto";
}
10, clear float
.hackbox{
display:table; //Display the object as a block element-level table
}
or
.hackbox{
clear:both;
}
Or add: after (pseudo object) to set the content that occurs after the object. It is 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;
}
11. DIV floating IE text produces a 3-pixel bug
The object on the left is floated, and the right is positioned using the left margin of the outer patch. The text within the object on the right will be spaced 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
12. Attribute selector (this cannot be considered compatible, it is a bug in hiding css)
p[id]{}
div[id]{}
is hidden for versions below IE6.0 and IE6.0.
There is still a difference between attribute selectors and sub-selectors used by FF and OPera. The scope of sub-selectors is reduced in form. Attribute selection The scope of the device is relatively large. For example, in p[id], all p tags with id are of the same style.