在制作網(wǎng)頁(yè)的過(guò)程中，自適應(yīng)問(wèn)題是經(jīng)常遇到，而又最讓人頭疼的，看了好多種解決的方法，但是都不是萬(wàn)能的。今天遇到這個(gè)問(wèn)題，實(shí)在讓我撓頭，借鑒了 shark的方法，又給了我一個(gè)新思路。當(dāng)時(shí)沒(méi)仔細(xì)看lbs的樣式表，今天才發(fā)現(xiàn)，.clear用的就是這個(gè)方法。接下來(lái)，我會(huì)做個(gè)關(guān)于“自適應(yīng)高度”問(wèn)題的匯總，以便今后遇到問(wèn)題時(shí)候更快解決。

為了解決浮動(dòng)元素引起父元素?zé)o法獲得高度的問(wèn)題，我們一般在子元素的最后加上一個(gè)spacer div（clear:both）。但是ie和mozilla對(duì)div的解釋不同引起一些表現(xiàn)上的差異。

最簡(jiǎn)單的spacer：

.hackbox{clear:both;}

ie可以正確地產(chǎn)生預(yù)期的效果，但是在mozilla中不起作用。所以現(xiàn)在很多人是這么用的

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

然后xhtml中加入一個(gè) ；，如下：

這回ie和mozilla都起作用了，但是ie并不認(rèn) height:0;　這個(gè)規(guī)則，結(jié)果ie中的這個(gè)spacer div就占了一定的高度，影響布局。

經(jīng)過(guò)n次實(shí)驗(yàn)，我發(fā)現(xiàn)用下面的方法能比較完美的解決這個(gè)問(wèn)題。

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

其實(shí)ie只需要有clear:both;這一條就可以實(shí)現(xiàn)我們的要求。那么下面這兩條規(guī)則有什么用呢？

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

第一條規(guī)則產(chǎn)生1px的一個(gè)透明的上邊框，第二條將margin-top設(shè)置為-1，以抵消這條邊框?qū)Σ季之a(chǎn)生的影響。

但是不幸的是ie不支持transparent這個(gè)值，它會(huì)將這條邊框變?yōu)楹谏?_-

不幸中的萬(wàn)幸是ie這小子還有一個(gè)不支持的值，就是!important，ie會(huì)忽略這它而選擇按后面兩條顯示，結(jié)果就是不顯示邊框（也就是只有clear:both;起作用了）。而mozilla卻會(huì)按!important指出的規(guī)則顯示。