DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS設置的背景圖片在IE7中點擊消失
CSS設置的背景圖片在IE7中點擊消失
編輯:CSS進階教程     

網頁制作Poluoluo文章簡介:在div+css中的時候你可能會遇見這樣的情況,ie6和ff浏覽器下面某個div的背景是可以正常顯示的,但是ie7下卻無端失蹤了背景.

在div+css中的時候你可能會遇見這樣的情況,ie6和ff浏覽器下面某個div的背景是可以正常顯示的,但是ie7下卻無端失蹤了背景!???什麼回事?原因很簡單.假如css的盒子模型下,以下html代碼:

<div class="foot">
<div class="font"><a>font</a></div>
<div class="font2"><a>font2</a></div>
</div>

被設置的css代碼為:

.foot{
margin-top:30px;
padding-top:100px;
border-bottom:10px solid #000;
background:url(img.jpg) no-repeat;//img.jpg高為100px
}
.font{
padding:5px
}
.font2{
padding:10px
}

根據盒子模型,這個foot的div所占據的豎直方向的空間為30+100+10+裡層div占據空間>140px,理論上除去上間隙的30px和下邊框的10px剩下的填充+子層占據的空間裡面應該可以出現高為100px的背景img.jpg,實際上IE6跟FF上面也出現了,但是IE7會因為foot(class是foot的div)裡面的div(這裡指的是font和font2)並沒有設置高度而認為foot的高度是0,因此背景圖片是看不見的。
解決辦法就很簡單了:設置裡層div高度(或者讓裡層div被撐大)或者直接設置foot的高度。當然直接設置foot的高度的話,裡面子層div豎直占位發生變化,甚至超出foot范圍時,就又要考慮div的自動擴展問題了。所以看著辦吧。

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