一.IE6/IE7對 display-inblock支持的欠缺

Html代碼：

	<div class="nav">
		<ul>
			<li><a href="">首頁</a></li>
			<li><a href="">公司介紹</a></li>
			<li><a href="">聯系我們</a></li>
		</ul>
	</div>

css代碼：

.nav{
	text-align: center;
}

ul li{
	display:inline-block;
    list-style-type:none;
}
ul li a{
	text-decoration:none;
}

在主流瀏覽器中顯示：

IE6/IE7中顯示：

解決方法：

ul li{
    display:inline-block;
    list-style-type:none;
    *display: inline;
}

二.IE6浮動下 margin雙倍邊距

html代碼:

<div class="test"></div>

css代碼：

.test{
	background:#ccc;
	width:80px;
	height:80px;
	margin-left:30px;
	float:left;
}

IE6顯示雙倍邊距

主流瀏覽器顯示

解決方法在對應的樣式中加display:inline 代碼如下：

.test{
	background:#ccc;
	width:80px;
	height:80px;
	margin-left:30px;
	float:left;
	display:inline;
}

三.IE6/IE7顯示垂直滾動條

表現描述：

有時候頁面就幾個字，根本沒有超出顯示範圍，IE6/IE7還會顯示垂直滾動條

解決方法：

.test{
	overflow: auto;
}

四.IE6對margin:0 auto;不會正確的進行解析

html代碼：

	<div class="test">
		<div class="test-title"></div>
	</div>

css代碼：

.test-title{
    background:#ccc;
	width:80px;
	height:80px;
	margin:0 auto;
}

主流瀏覽器顯示:

IE6顯示：

解決方法 在父元素中使用text-align:center,在元件中使用text-align:left：

.test{
	text-align: center;
}
.test-title{
        background:#ccc;
	width:80px;
	height:80px;
	margin:0 auto;
	text-align:left;
}

五：IE6不支持css min-width與min-height

表現描述：

有時候想讓一個div最小高度為100px，但ie6中識別min-height，可不識別

解決方法：

.test{
	min-height:100px;
	height:auto ! important;
	height: 100px;
}

意思是：新的瀏覽器識別出min-height這個樣式，當執行到第二行的時候又有!important，所以第三行不起作用。而在ie6中解析時，它不識別min-height和!important，所以直接就解析第三行height樣式，繼而間接實現了min-height。同理min-width也可以用這種方法實現

六.png圖片透明

表現描述：png的圖片在ie6中，透明的部分會顯示成灰色

解決方法：

是一個爭對png的hack，代碼如下

img {  
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);  
 }

IE下常見兼容性問題