DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> ie7中overflow:auto無效的解決方法
ie7中overflow:auto無效的解決方法
編輯:關於CSS     

產生原因
當父元素的直接子元素或者下級子元素的樣式擁有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,有時候你自己看代碼時都有點無語,解決方法可以給父層加一個相對定位,然後給這個右邊加一個絕對定位來實現。我覺得這樣子比較靠譜點。

以上就是這篇文章的全部內容,希望對大家的學習和工作能有一定的幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved