1.IE的雙邊距Bug以及解決辦法
一、什麼是雙邊距Bug？
先來看圖：
我們要讓綠色盒模型在藍色盒模型之內向左浮動，並且距藍色盒模型左側100像素。這個例子很常見，比如在網頁佈局中，側邊欄靠左側內容欄浮動，並且要留出內容欄的寬度。要實現這樣的效果，我們給綠色盒模型應用以下CSS屬性：
- .floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; }
很簡單，對吧？但是當我們在IE6中查看時，會發現左側外邊距100像素，被擴大到200個像素。如下圖：
二、怎麼會這樣？
說 實話，這個原因還真是不清楚。但是這樣的結果確確實實在IE6中出現了。而且這種情況出現的條件是當浮動元素的浮動方向和浮動邊界的方向一致時纔會出現。 如同上面的例子一樣，元素向左浮動並且設置了左側的外邊距出現了這樣的雙邊距bug。同理，元素向右浮動並且設置右邊距也會出現同樣的情況。同一行如果有 多個浮動元素，第一個浮動元素會出現這個雙邊距bug，其它的浮動元素則不會。
三、如何修正這個Bug？
很簡單，只需要給浮動元素加上display:inline;這樣的CSS屬性就可以了。就這麼簡單？對，就這麼簡單。如下圖：
CSS代碼如下：
.floatbox {float: left; width: 150px;height: 150px; margin: 5px 0 5px 100px; display: inline; }
2.著名的 img標籤3像素問題
img標籤在HTML5和HTML4.0.1的嚴格模式渲染的時候，下面會有幾像素的空白。
解決方法:
1.img標籤增加vertical-align:top
因爲圖片默認是行內元素，行內元素默認是baseline對齊的，和底部會有一段距離。
2.img標籤的父標籤增加font-size:0/line-height:0;
3.img標籤增加display:block;讓它和匿名行級盒子不在一個佈局上下文中，也就不存在行級盒的對齊問題
3.IE6下解決select層級高的問題
div在IE6下無法遮蓋select，原因是在IE6下，瀏覽器將select元素視爲窗口級元素，這時div或者其它的普通元素無論z-index設置的多高都是無法遮住select元素的。
解決方法有三種：
1：當浮動層div出現的時候，用JS將select隱藏，當浮動層div消失的時候select恢復出現。
2.可以用ul,li等進行模擬一個select的元素
3. 利用iframe的方式進行。
下面講講第三種最常用的的方式：
注意：生成的iframe是添加到要遮蓋select的元素上。 其實相當於iframe作爲它的背景存在。
<iframe frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>
當然可以用JS動態的創建，當識別的爲IE6的時候
function createIframe(){//爲兼容IE6創建框架
var myIframe = document.createElement('iframe');
myIframe.src = 'about:blank';
myIframe.style.position = 'absolute';
myIframe.style.zIndex = -1;
myIframe.style.left = '-1px';
myIframe.style.top = 0;
myIframe.style.border = 0;
myIframe.style.filter = 'alpha(opacity= 0)';
myIframe.style.width = '250px';
myIframe.style.height = '250px';
return myIframe;
}
再添加到需要遮蓋select的元素上面。
4.IE5-8不支持opacity的解決辦法
.opacity {
opacity: 0.4;
filter: alpha(opacity=60);/*for IE5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/*for IE8*/
}
5.IE6不支持PNG透明背景,解決方法:IE6下使用GIF圖片