瀏器自身的問題往往是這些麻煩的罪魁禍首。Firefox對標準的支持較好些，IE7、IE8次之，IE6目前用戶群較多，但也比較糟糕，經(jīng)常莫名其妙地多出一些空隙等等。拿浮動布局來說，你算好的寬度在Firefox以及 IE7、IE8下可能是正常的，拿到IE6里就會發(fā)現(xiàn)不該換行的時候它卻換行了。
然而，不管HTML頁面設(shè)計人員怎么罵微軟，網(wǎng)頁還是要做的。我這里就以自己的經(jīng)驗給大家介紹一些常用的解決方案。
1、如果是兩欄并列，要在中間顯示分界線或圖片，可以使用repeat-y的背景圖片來實現(xiàn)，此樣式寫在這兩欄的父級元素中，可以保證分界線與最高的欄等高。
示例：


假設(shè)vline.gif是寬100px高1px，左邊99像素為白色，最右邊1像素是黑色，則此背景圖片實現(xiàn)的效果就是在兩列間拉出一條黑色豎線。
不過要說明一下，這種方法如果父元素寬度設(shè)計200px，理論上是正確的，但實際上在IE6里會換行，因為IE6不遵從W3C標準。在IE6里你可以把父元素寬度設(shè)得比200px大一些，但這樣格式會不夠完美。你可以用下面的margin法解決這個換行問題。
2、如果有一列想用自適應(yīng)寬度，而不是固定寬度，可以巧用margin屬性。比如左邊固定100px，右邊自適應(yīng)，則可以讓父元素“margin- left:100px”，第一列再“margin-left:-100px”，第二列就可以用“width:100%”來實現(xiàn)自適應(yīng)寬度了。如果不這樣巧用margin，第二列沒法設(shè)百分比，因為瀏覽器客戶區(qū)寬度*100%+100px是超出瀏覽器客戶區(qū)總寬度的，瀏覽器會出現(xiàn)橫向滾動條；又因為瀏覽器客戶區(qū)總寬度不確定（確定的話就不用什么自適應(yīng)了），你也沒法用類似80%這樣的百分比使其正好撇下100px給第一列。
另外你可能想讓這兩列的父級有一個最小寬度以避免兩列換行，這個可以用min-width屬性來實現(xiàn)。
示例代碼：


3、自適應(yīng)高度的該如何設(shè)計呢？很多人為這個問題頭痛過，抱怨height:100%不管用。其實，讓它管用很簡單，只是別忘了給html也加上 height:100%的屬性。沒錯，就是html，你可以寫成這樣：html,body{height:100%}。但這樣還有個問題，沒解決。如果你想讓一行字始中處于最下面，該怎么做呢？答案還是margin。
你可以把主體部分放在一個DIV中，將其最小高度設(shè)為100%，然后在后面放頁腳的DIV，假如它的高度為40px，則“margin- top:-40px”，這樣可能會使主體部分下邊的內(nèi)容被遮住，解決辦法是在主體部分最下面的元素上加“padding-bottom:40px”屬性即可。理論上講加“margin-bottom:40px”也可以，但觀查發(fā)現(xiàn)在IE里會出現(xiàn)垂直滾動條。
示例代碼：


注意別忘了樣式表中要加：html,body{height:100%;} 峰之部落 原創(chuàng)文章，轉(zhuǎn)載請注明出處。
這三招應(yīng)用技巧，基本能解決DIV+CSS浮動布局的常見問題，且能較好的兼容不同的瀏覽器。

最新評論