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

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

　　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

 

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