DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> .clear方法解決網頁自適應高度的問題
.clear方法解決網頁自適應高度的問題
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:為了解決浮動元素引起父元素無法獲得高度的問題,我們一般在子元素的最後加上一個Spacer Div(clear:both)。但是IE和Mozilla對div的解釋不同引起一些表現上的差異。

在制作網頁的過程中,自適應問題是經常遇到,而又最讓人頭疼的,看了好多種解決的方法,但是都不是萬能的。今天遇到這個問題,實在讓我撓頭,借鑒了 Shark的方法,又給了我一個新思路。當時沒仔細看LBS的樣式表,今天才發現,.clear用的就是這個方法。接下來,我會做個關於“自適應高度”問題的匯總,以便今後遇到問題時候更快解決。

為了解決浮動元素引起父元素無法獲得高度的問題,我們一般在子元素的最後加上一個Spacer Div(clear:both)。但是IE和Mozilla對div的解釋不同引起一些表現上的差異。

最簡單的Spacer:

.HackBox{clear:both;}

IE可以正確地產生預期的效果,但是在Mozilla中不起作用。所以現在很多人是這麼用的

.HackBox{ height:0; clear:both;}

然後XHTML中加入一個 ;,如下:

這回IE和Mozilla都起作用了,但是IE並不認 height:0; 這個規則,結果IE中的這個Spacer Div就占了一定的高度,影響布局。

經過N次實驗,我發現用下面的方法能比較完美的解決這個問題。

.HackBox{
border-top:1px solid transparent !important;
margin-top:-1px !important;
border-top:0;
margin-top:0;
clear:both;
visibility:hidden;
}

其實IE只需要有clear:both;這一條就可以實現我們的要求。那麼下面這兩條規則有什麼用呢?

border-top:1px solid transparent;
margin-top:-1px;

第一條規則產生1px的一個透明的上邊框,第二條將margin-top設置為-1,以抵消這條邊框對布局產生的影響。

但是不幸的是IE不支持transparent這個值,它會將這條邊框變為黑色-_-

不幸中的萬幸是IE這小子還有一個不支持的值,就是!important,IE會忽略這它而選擇按後面兩條顯示,結果就是不顯示邊框(也就是只有clear:both;起作用了)。而Mozilla卻會按!important指出的規則顯示。

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