一個比較完美的spacer div技巧

---

?

原文出自：http://www.sharkui.com/articles/article.php?id=1

---

?

在制作網頁的過程中，自適應問題是經常遇到，而又最讓人頭疼的，看了好多種解決的方法，但是都不是萬能的。今天遇到這個問題，實在讓我撓頭，借鑒了 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指出的規則顯示。

轉載于:https://www.cnblogs.com/binyong/archive/2009/03/17/1414753.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的一个比较完美的spacer div技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。