ie7中overflow:auto無效的解決方法
發(fā)布時間：2016-09-05 16:35:58 作者：佚名 
我要評論
我要評論小編之前遇到一次這個bug解決之后，今天又遇到，還是不明白，于是搜索發(fā)現解決方法很簡單，現在分享出來給大家一起看看。
產生原因
當父元素的直接子元素或者下級子元素的樣式擁有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，有時候你自己看代碼時都有點無語，解決方法可以給父層加一個相對定位，然后給這個右邊加一個絕對定位來實現。我覺得這樣子比較靠譜點。
以上就是這篇文章的全部內容，希望對大家的學習和工作能有一定的幫助。
相關文章
詳解CSS中zoom屬性或overflow:auto屬性清除浮動的作用
這篇文章主要為大家介紹了CSS中zoom屬性或overflow:auto屬性清除浮動的作用,文中通過實例代碼介紹的很詳細，相信會對大家的理解和學習具有一定的參考借鑒價值，有需要的朋2016-11-26DIV背景圖片在Firefox下不顯示通過overflow:auto可解決
div里加入背景圖片，可是在Firefox下卻無法正確顯示背景圖片，通過overflow:auto便可解決此問題，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-03CSS教程:導致一些問題的overflow-CSS教程-網頁制作-網頁教學網
overflow有問題嗎？沒問題。那為什么說要慎用呢？因為有時會導致一些問題。。。 關于overflow:auto的，很多人貪他書寫方便，直接用來清除浮動。但是Firefox使用overflow:au2008-10-17
這篇文章主要介紹了overflow:auto的用法詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-19