ie9 scrollbar bug（IE9父容器overflow:auto時，子容器狀態更改導致滾動條下出現額外空間）
阿新 • • 發佈：2018-12-31
轉自文章 http://www.jackness.org/2011/10/18/ie9-scrollbar-bug/
當我們製作表單的時候，有時候會遇到資料過長，表單列數過多，需要橫向滾動條的需求，我們一般的做法是 給這個表格的外層加一個 scroll_auto 的 div 並設定:
?| 1 2 |
/*css
document*/
.scroll_auto{
width:100%;
overflow:auto;}
|
套在table的外層
?| 1 2 3 4 5 6 7 8 |
<!--
html element -->
<div
class="scroll_auto">
<table>
<tr>
<td></td>
</tr>
</table>
</div>
|
如果碰巧 你給這個 table 或者table裡面的元素 設定了 :hover 的偽類(最常見的是滑鼠移到table中對應的行數，該行高亮) 並在裡面寫有屬性，那恭喜 專屬於 ie9 的 bug出現了(經測試，直到ie10預覽版第二版，這個bug都還沒修復)。
靜看是好的，可是，當我們滑鼠移動到 table裡面的時候，悲劇出現了。
在 ie9 中 ,我們可以看到每當我們在table內部促發hover偽類的時候， 黑色的塊級元素 就會往下掉,直到掉到瀏覽器視窗的底部又跳回原來的位置，周而復始…
bug 觸發條件：
經測試發現，這個bug的出現 有2個條件：
- 父級設定 overflow:auto(準確來說 應該是 overflow-x:auto),並且裡面的元素寬度超出父級導致橫向滾動條出現
- 父級元素的任意子元素設有:hover偽類並且裡面有屬性設定(與原有的屬性不一樣即可)
滿足這2個條件，當你觸發父級裡面的 :hover 偽類的時候，bug就會出現。
解決方案：
知道了觸發條件，自然解決方案就能得知。
根據觸發條件得到的解決方案是：
-
給父級別設定 overflow-x:scroll,即：
?1 2 3 /*css document*/.scroll_auto{width:100%; overflow-x:scroll;} -
保證這個父級裡面的元素不超出 父級的寬度。
-
保證這個父級裡面的元素沒有:hover 偽類(