margin和padding總是有可能要用到，而產(chǎn)生的問(wèn)題如何解決呢？由于瀏覽器解釋容器寬度的方法不同：
IE 6.0 Firefox Opera等是
真實(shí)寬度=width+padding+border+margin
IE5.X
真實(shí)寬度=width-padding-border-margin
IE中有浮動(dòng)對象的雙倍距離之BUG（IE Doubled Float-Margin Bug ）, 這里還需要具體問(wèn)題具體解決，下面是解決辦法：IE Bug--浮動(dòng)對象外補丁的雙倍距離
很明顯，第一種下很完美的布局在第二種情況下后果是很凄慘的！
解決的方法是hack
div.content {
width:400px; //這個(gè)是錯誤的width，所有瀏覽器都讀到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的內容
voice-family:inherit;
width:300px; //包括IE6/win在內的部分瀏覽器讀到這句，新的數值(300px)覆蓋掉了舊的
}
html>body .content { //html>body是CSS2的寫(xiě)法
width:300px; //支持CSS2該寫(xiě)法的瀏覽器(非IE5)有幸讀到了這一句
}
div.content {
width:300px !important; //這個(gè)是正確的width，大部分支持!important標記的瀏覽器使用這里的數值
width(空格)/**/:400px; //IE6/win不解析這句，所以IE6/win仍然認為width的值是300px；
//而IE5.X/win讀到這句，新的數值(400px)覆蓋掉了舊的，因為!important標記對他們不起作用
}
html>body .content { //html>body是CSS2的寫(xiě)法
width:300px; //支持CSS2該寫(xiě)法的瀏覽器有幸讀到了這一句
}
具體解釋點(diǎn)擊下面鏈接查看
XHTML+CSS兼容性解決方案小集
CSS之兼容瀏覽器篇
列等高技巧
n行n列布局，每列高度（事先并不能確定哪列的高度）的相同，是每個(gè)設計師追求的目標，做法有：背景圖填充、加JS腳本的
方法和容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法。
背景圖填充法：
xhtml:
<div id="wrap">
<div id="column1">這是第一列</div>
<div id="column1">這是第二列</div>
<div class="clear"></div>
</div>
css:
#wrap{ width:776px; background:url(/bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}
就是將一個(gè)npx寬的一張圖片在外部容器縱向重復，定位到兩列交錯的位置縱向重復，在視覺(jué)上產(chǎn)生了兩列高度一樣的錯覺(jué)
JS腳本法：
www.blueidea.com/bbs/NewsDetail.asp?id=2453983代碼的原理基本就是這樣，讀取高度，判斷高度，高度相等
容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法
這篇文章說(shuō)的很詳細了
CSS布局自適應高度解決方法
探索CSS實(shí)現三行三列等高布局
滿(mǎn)屏高度布局（最窄770px最寬1024px經(jīng)典布局）
http://www.itlearner.com/article/2006/3227.shtml今天和一個(gè)網(wǎng)友兩天，他提到：給一個(gè)外國公司做網(wǎng)站，要求1.800x600滿(mǎn)屏。2.1024x767滿(mǎn)屏。3.1280下居中。4.不許用JS。
我突然想起了這篇文章，哈哈！把它感覺(jué)不可思議的事情解決了！但是好像對于IE5有點(diǎn)問(wèn)題??！
至此，把布局從最基本的知識點(diǎn)到高級應用整理了一遍，有遺漏的請大家跟貼補上，唯一的缺憾就是例子演示不夠，由于時(shí)間關(guān)系，見(jiàn)諒了！
