css的兼容问题

1.双边距问题：解决办法：display: inline  ；

2.水平居中问题：margin： 0 auto； text-align:center;

3.div的垂直居中问题：

    vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。

    演示     

<div id="box"> 
	<p>hellow world</p> 
</div>

#box{
	width: 200px; 
	height: 200px; 
	background: blue;
	line-height: 200px;
}

4.鼠标显示为手状： cursor：pointer，cursor：hand只能在IE中起作用；

5.IE6，3像素的bug 

<div id="box"> 
	<div id="left">3px bug</div>
	<div id="right">3px bug</div>
</div>

#box{
	width: 400px; 
	height: 200px;
	border: 1px solid;
}
#left{
	float: left;
	width: 100px;
	height: 200px; 
	background: #555;
}
#right{
	width: 200px;
	background: yellow;
	height: 200px; 
}

   

解决办法 ：  *html  #left{margin-right： -3px；}

6.清楚浮动，三中方法： clear、overflow、：after，详见css技巧

7.IE6，图片下产生3像素的间距

<div id="box">
	<img src="img/logo.png" alt="aaa" />
	<p>hellow world!</p>
</div>

#box{
	width: 400px;
	margin: 10px auto;
	border: 1px solid; 
	height: 300px; 
}
#box img,#box p{
	margin: 0;
	border: 1px solid;
}

　　

 解决办法： #box  img{display: block;}

8.撑开父容器的高度  

{
    height： 200px;
    height:  200px; !important
    min-height: 200px;
}

9.注释bug，即多出一只脚：解决办法：把注释去掉

10.吞吃现象,即margin，padding无效，解决办法：zoom：1；参见