IE下css常見問題總結及解決

1、div的垂直居中問題：
解決方法：將行距增加到和整個DIV一樣高：

復制代碼代碼如下:
div{
height: 100px;
line-height: 100px;
text-align: center;orvertical-align: middle（測試發現使用vertical-align時，水平方向無法居中，text-align可以）
}
divtest/div

2、margin加倍的問題：
【IE下css常見問題總結及解決】ie6下， div設置為float時，左（右）margin會加倍。
解決方法：在這個div里面加上display:inline; 例如：

3、ie6下頁面min-width/height與max-width/height問題：
ie6無法識別max- 和min-，可以用表達式解決這一問題，例如：

4、ie6 3px bug：
1）當浮動元素與非浮動元素相鄰時，會出現3px像素空隙，例如：

解決方法：給非浮動的元素添加浮動屬性，即可解決這個問題（.right添加float:left;）。
2）div包含img時，底部會出現留白，例如：

解決方法：a、dom結構調整為：div style=background:#f00;img src=https://www.questions.com.cn/dnjc/test alt=pic //div
　b、設置img元素display: block; （img 默認為inline元素）

5、ie6捉迷藏的問題：（參考http://blog.csdn.net/bluesqsr/article/details/5911038）
當div應用稍顯復雜時，常常出現的情況是在用于版式布局時，有時當制作一個左右兩欄的網頁，而每個欄中又有一些鏈接、div等，這個時候容易引發捉迷藏問題。即有些內容無法顯示，而當鼠標選擇此區域時，發現內容是確實存在的，例如：

解決方法：
1）：在對頁面上的對象使用float浮動之后，最后在下面使用帶有clear:both;的div對頁面上進行一些浮動上的清理工作，并且盡量避免對.layout使用background 。去掉.layout的background后可以正常顯示。
2）：給.layout使用固定寬和高，盡管這樣會對頁面有所限制，但能消除一些捉迷藏的影響。給.layout添加width: 500px; height: 300px;，右側內容可以正常顯示。
3）：給.layout和.left添加position:relative;后頁面內容可以正常顯示.
4）：對.layout使用line-height屬性，強制瀏覽器對其中的內容進行行距調整，從而可以消除捉迷藏bug 。例如添加line-height:1;右側內容就可以正常顯示。
捉迷藏bug雖然是IE留下的后遺癥，但是我們應當在div的嵌套上遵循一些習慣，盡量使用最少的層次嵌套來滿足頁面設計需要，使頁面結構簡單、實用、易控制與管理，盡可能的減少由于不必要的嵌套引來的連鎖問題。
6、父div高度自適應失效問題：
div嵌套時，當子div設置浮動屬性后，其父div的高度自適應失效了。例如：

解決方法：
1）向父div的末尾再插入一個額外的標簽，并令其清除浮動（clear）以撐大父容器。這種方法瀏覽器兼容性好，但需要添加額外的而且通常是無語義的標簽。這種方法是W3C推薦的方法。

2）使用after偽類（ie6/7不支持after偽類）：
這種方法就是對父容器使用after偽類和內容聲明在指定的現在內容末尾添加新的內容。經常的做法就是添加一個點，因為它比較小不太引人注意。然后我們再利用它來清除浮動（閉合浮動元素），并隱藏這個內容 #outer:after

復制代碼代碼如下:
{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

3）在父div中使用overflow屬性，并設置為hidden或者auto，可以在標準兼容瀏覽器中閉合（清除）浮動元素，為了兼容IE6可以寫成如下形式：

4）浮動父元素，float-in-float：這種做法就是讓父容器也浮動，這利用到了浮動元素的一個特性浮動元素會閉合浮動元素。這種方式在IE和標準兼容瀏覽器中都有較好的效果，但在實際編寫中，父div不是隨意就可浮動的，有可能造成更多問題，因此一般不采用此法。
7、定義1px高度容器問題：
ie6下無法定義1px高度的容器，例如：