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


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


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


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

最新評(píng)論