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

<div id=”wrap” style=”background:url(images/vline.gif) repeat-y left top;”>
<div id=”col1″ style=”float:left;width:100px;”>第一列</div>
<div id=”col2″ style=”float:left;width:100px;”>第二列</div>
</div>

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

<div id=”wrap” style=”background:url(images/vline.gif) repeat-y left top;margin-left:100px;min-width:768px;”>
<div id=”col1″ style=”float:left;width:100px;margin-left:-100px;”>第一列</div>
<div id=”col2″ style=”float:left;width:100%;”>第二列</div>
</div>

3、自適應高度的該如何設計呢？很多人為這個問題頭痛過，抱怨height:100%不管用。其實，讓它管用很簡單，只是別忘了給html也加上 height:100%的屬性。沒錯，就是html，你可以寫成這樣：html,body{height:100%}。但這樣還有個問題，沒解決。如果你想讓一行字始中處于最下面，該怎么做呢？答案還是margin。