Div+css must be considered for browser-compatible techniques

1, different interpretations of the box interpreter.#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, hide css in IE, use the sub-selector

Html>body #box {}

3, only IE identification

*html #box {}

4, in Ie/win effective and Ie/max hidden, using a backslash

5, for IE to define a separate style

6, the double distance generated by the floating IE

#box{
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

Let's go over the block,inline. Two elements, the block element is characterized by: always start on a new line, height, width, row height, margin can be controlled (blocks elements); Inline element is characterized by: and other elements on the same line,... Not controllable (inline element);

#box{
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
diplay:table; //for ff,模拟table的效果
}

7,

for oprea only
@media all and (min-width:0px){
#box{ }
}

8,ie with the width and height of the problem

IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This is a big problem, if you only use width and height,

In the normal browser, these two values will not change, if only with Min-width and min-height, ie below is not set width and height.

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;
}