如何解決ie7中overflow:auto無效的方法

這篇文章主要介紹了關於如何解決ie7中overflow:auto無效的方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

產生原因
當父元素的直接子元素或下級子元素的樣式擁有position:relative屬性時，父元素的overflow:auto屬性就會失效。

解決方案
解決這個bug很簡單，在父元素中使用position:relative;即可解決該bug。

程式碼bug重現

<ul>
<li>我是很努力的前端博客，希望你会喜欢</li>
<li>我是很努力的前端博客，希望你会喜欢</li>
<li>我是很努力的前端博客，希望你会喜欢</li>
<li>我是很努力的前端博客，希望你会喜欢</li>
<li>我是很努力的前端博客，希望你会喜欢</li>
</ul>

ul{overflow:auto; height:100px;}
li{position:relative; height:30px; line-height:30px;}

在ie7是會出現奇怪bug，有捲軸出現，但無法拉動捲動條。解決就是給ul{position:relative;}

#IE7 float:right會換行
以前以為是ie6才會出現，沒想到ie7也同樣有這個bug，網路上很多說把float:right的元素放在最前面，這是有多麼2的想法啊。犧牲一個元素的位置來解決這個bug，有時候你自己看程式碼時都有點無語，解決方法可以給父層加一個相對定位，然後給這個右邊加一個絕對定位來實現。我覺得這樣子比較可靠點。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於CSS的書寫規範順序與命名規則

以上是如何解決ie7中overflow:auto無效的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！