乙個比較完美的spacer div技巧

2021-09-05 20:34:20 字數 945 閱讀 7500

乙個比較完美的spacer div技巧

原文出自:

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

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

最簡單的spacer:

.hackbox

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

.hackbox

然後xhtml中加入乙個 ;,如下:

這回ie和mozilla都起作用了,但是ie並不認 height:0; 這個規則,結果ie中的這個spacer div就佔了一定的高度,影響布局。

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

.hackbox

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

border-top:1px solid transparent;

margin-top:-1px;

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

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

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

乙個比較完美的spacer div技巧

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

乙個比較完美的單例模式

單例模式基本上是每乙個程式設計師都能隨手寫的設計模式,牢記兩私一公的原則 即私有建構函式,私有靜態例項屬性,公共的獲取例項的靜態方法。遵循這個原則寫乙個,public class singleton public static singleton getinstance return instanc...

乙個完美的導航樹

http bbs.xoyo.com forumdisplay.php?fid 4339 target main title 新手入門 高手高階,玩家遊戲經驗的交流區 http bbs.xoyo.com forumdisplay.php?fid 4700 target main title 精彩封神,...