這篇文章主要介紹了關於如何解決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中文網!
相關推薦:
以上是如何解決ie7中overflow:auto無效的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!