IE9父容器overflow:auto時，子容器狀態更改導致滾動條下出現額外空間的問題探討

IE的每次跟新都會有一些奇葩的bug，我們默默承受了。

　　這個問題在項目中出現困擾了我近一個星期，這裏記錄一下。看下面實例

    <style>
    .panel{
        width: 200px;
        overflow: auto;
        background-color: #f00;
    }
    .inner{
        width: 250px;
        background-color: #ff0;
    }
    </style>

    <div class="panel">
        <div class="inner">
            <input type="checkbox" />
        </div>
    </div>

　　在IE9下的顯示效果爲

　　

　　然後你點擊那個checkbox顯示效果如下

　　

　　多出了紅色背景那塊，那塊明顯是屬於父容器.panel。你一個可以試一下只要是更改子容器中的標籤的狀態、值、內容甚至修改子容器.inner的標籤屬性（比如修改class）都會導致父容器.pannel的滾動條下多出一些空間。

　　比如我們爲.inner元素加了一個class：aaa。效果如下

　　

　　再測試一個例子，爲input添加一個value值

　　

　　所以綜合前面的測試結果，這裏總結一下。

出現顯示異常的必備條件：

　　1.父容器的css擁有css樣式overflow-x:auto(大家可以動手試一下，overflow-y是不行的)。

　　2.子容器及子容器的後代節點有狀態、值、內容、屬性等的修改。

解決方案：

　　設置父容器的高度相關的css樣式值。這裏面主要有三個相關的屬性可以設置任意一個。

　　height:可以設置成px或%。比如"height:100%"

　　min-height:只能設置成%，推薦使用。比如"min-height:0%"。

　　max-height:只能設置成%。比如"max-height:100%"。

　　

　　這個bug別人也報過，可以參考http://social.microsoft.com/Forums/id-ID/1c239c1d-84d2-461b-991d-d7834edaa121/ie9bug?forum=267

 

　　如果覺得本文不錯，請點擊右下方【推薦】！