关于IE的几个bug

1. 居中元素

居中一個元素是很多前端開發人員在設置樣式的時候會遇到的問題。最簡單的居中方式是在相關的元素上設置 *margin:auto;. 這個方法可以在不考慮父元素的寬度下進行居中。不過，怪異模式下的IE6缺達不到我們想要的效果。

請看下面代碼：

#container{
    border: solid 1px #000;
    background: #777;
    width: 400px;
    height: 160px;
    margin: 30px 0 0 30px;
}

#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 100px;
    margin: 30px auto;

}

你希望看到的效果：

IE顯示的結果：

這是因為IE6怪異模式下或者是早期的IE版本不識別margin:auto所導致的問題，不過，這個問題挺容易修復。

方法：

為IE6設置居中最簡單可靠的方法是給父元素添加text-align:center，給居中元素添加text-align: left以確保文本對齊正確

#container{
    border: solid 1px #000;
    background: #777;
    width: 400px;
    height: 160px;
    margin: 30px 0 0 30px;
    text-align: center;
}

#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 100px;
    margin: 30px 0;
    text-align: left;
}

2.階梯效應

大部分的開發人員會在導航欄里使用list通常我們會創建一些容器，再往裡面增加一些<a>標籤，接著設置<a>浮動。但是，在IE裡面，情況比較複雜 如下代碼：

<ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

ul {
    list-style: none;
}    

ul li a {
    display: block;
    width: 130px;
    height: 30px;
    text-align: center;
    color: #fff;
    float: left;
    background: #95CFEF;
    border: solid 1px #36F;
    margin: 30px 5px;
}

通常瀏覽器會這麼渲染：

而在IE則會這麼顯示：

這個看起來效果可不怎麼好，不過我們有兩個方法可以來修復這個問題

方法1：

設置li元素浮動而不是<a>浮動

ul li {
    float: left;
}

方法2：

設置li元素display: inline. 這麼做不僅解決了問題，而且同樣解決了下面我們會提到的雙邊距問題。不過有一些人可能不喜歡在行內元素放置塊級元素的做法。

ul li {
    display: inline
}

3.浮動產生的雙邊距

讓一個元素在浮動方向擁有margin效果即可觸發這一個bug

#element{
    background: #95CFEF;
    width: 300px;
    height: 100px;
    float: left;
    margin: 30px 0 0 30px;
    border: solid 1px #36F;
}

正常瀏覽器顯示效果：

IE效果:

解決這個bug的方法是設置浮動元素的display為inline：

#element{
    background: #95CFEF;
    width: 300px;
    height: 100px;
    float: left;
    margin: 30px 0 0 30px;
    border: solid 1px #36F;
    display: inline;
}

4.元素不可設置較小高度

有的時候，我們需要設置元素具有較小的高度。通常來說我們只需要設置height:XXpx就可以達到目的。不過，在IE上我們可能會得到雙倍的高度。

#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 2px;
    margin: 30px 0;
}

我們希望得到這樣的效果：一個有1px邊距，高2px的元素。

但是在IE：

引起這個bug的原因是，IE拒絕讓元素的高度比設置的font-size還小。所以設置font-size為0之後我們可以隨便設置一個小尺寸的高度

#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 2px;
    margin: 30px 0;
        font-size: 0;
}

不過還有一個更好的方法,通過設置overflow: hidden來實現目的

#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 2px;
    margin: 30px 0;
        overflow: hidden
}

5. Auto Overflow 與相對定位的元素

當父元素的overflow為auto而其中含有position為relative的元素則會出現這個bug。相對定位的元素會闖出父元素的邊界。

<div id="element"><div id="anotherelement"></div></div>

#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 150px;
    margin: 30px 0;
    overflow: auto;
}

#anotherelement{
    background: #555;
    width: 150px;
    height: 175px;
    position: relative;
    margin: 30px;
}

期望效果：

IE效果:

解決方法：設置父元素的position同樣為relative

#element{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 300px;
    height: 150px;
    margin: 30px 0;
    overflow: auto;
        position: relative;
}

6.被破壞的盒子模型

7.設置最小的寬度與高度

IE忽略了min-height這個屬性

解決方法1： 使用!important 來hack

#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}

方法2：利用IE不能解析子選擇器的特性

#element {
    min-height: 150px;
    height: 150px;
}

html>body #element {
    height: auto;
}

8. 浮動佈局的錯誤行為

創建一個無表格佈局一個重要的概念是浮動。在大部分情況下，IE6的處理還是差強人意。不過，但遇到了不可破壞的內容或是當元素的寬度超過父元素的寬度，就會出現下面的問題

<div id="container">
    <div id="element">http://net.tutsplus.com/</div>
    <div id="anotherelement"></div>
</div>

#element, #anotherelement{
    background: #95CFEF;
    border: solid 1px #36F;
    width: 100px;
    height: 150px;
    margin: 30px;
    padding: 10px;
    float: left;
}

#container{
    background: #C2DFEF;
    border: solid 1px #36F;
    width: 365px;
    margin: 30px;
    padding: 5px;
    overflow: auto;
}

期望：

在IE：

我們可以看到，第一個DIV自己伸展開了以適應它自己的內容

對於這個bug目前還沒有太好的辦法，不過我們可以設置overflow: hidden來拯救我們的佈局

#element{
    background: #C2DFEF;
    border: solid 1px #36F;
    width: 365px;
    margin: 30px;
    padding: 5px;
    overflow: hidden;
}

9. 列表間的空隙

IE6會在列表元素間增加一些垂直空間。

<ul>
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 <li><a href="#">Link 3</a></li>
</ul>

ul {
    margin:0;
    padding:0;
    list-style:none;
}

li a {
    background: #95CFEF;
    display: block;
}

他們應看起來是這樣:

IE下效果:

方法1：

li a {
    background: #95CFEF;
    display: block;
        width: 200px;
}

方法2：

li a {
    background: #95CFEF;
    float: left;
        clear: left;
}

方法3： li { display: inline; }