資源描述：
《跨瀏覽器兼容的css代碼》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在應用文檔-天天文庫。
1、跨瀏覽器兼容的CSS代碼作為一個Web設計師，你的網(wǎng)站在各種瀏覽器中解釋一致是我們追求的目標，然而這是一個永遠無法真正實現(xiàn)的目標，很多人認為，完美的跨瀏覽器兼容并不必要，這樣說雖然沒錯，但在很多情形，一種近似的兼容還是很容易實現(xiàn)的，本文講的是各種跨瀏覽器兼容的CSS編碼準則和技巧。理解CSS盒子模型?如果想寫出簡單而且有效的跨瀏覽器兼容的CSS代碼，透徹地理解CSS盒子模型是首要事情，CSS盒子模型并不難，且基本支持所有瀏覽器，除了某些特定條件下的IE瀏覽器。CSS盒子模型負責處理以下事情:·一個blcok（區(qū)塊）級對象占據(jù)多
2、大的空間·該對象的邊界，留白·盒子的尺寸·盒子與頁面其它元素的相對位置CSS盒子模型有以下準則:·Block（區(qū)塊）對象都是矩形（事實上所有對象都如此）·其尺寸由width,height,padding,borders,以及margins決定·如果不設置高度，該盒子的高度將自動適應其包含的內(nèi)容，加上留白等（除非使用了float）·如果不設置寬度，一個非float型盒子水平上將充滿其父容器（扣除父容器的留白）處理block級對象時，必須注意以下事項:·如果一個盒子的寬度設置為100%，它就不能再設置margins,padding
3、,和borders，否則會撐破其父容器·垂直毗鄰的margin會引起復雜的坍塌問題，導致布局問題（比如兩個垂直毗鄰的Block對象，上面的對象的bottom-margin為40，下面的對象的top-margin為20，則兩個對象的間距將是40，而不是60-譯者）·擁有相對位置和絕對位置的對象，擁有不同的行為在Firefox的Firebug中顯示的盒子模型理解Floating和Clearing屬性一個網(wǎng)頁設計師對float屬性應用應該相當熟悉，實現(xiàn)多欄排版的最好方法是使用?float?屬性。一個float對象可以居左或居右，一個
4、設置為float的對象，將根據(jù)設置的方向，左移或右移到其父容器的邊界，或其前面的float對象的邊界，而緊隨其后的非float對象或內(nèi)容，則包圍在其相反的方向。以下是使用float和clear屬性的一些重要準則:·一個float對象，將從其置身的block級非float內(nèi)容流中跳出，換句話說，如果你要將一個box向左邊f(xié)loat，它后面的block級非float對象會顯示到下方，inline級內(nèi)容會在旁邊包圍·要讓一段內(nèi)容從一側(cè)包圍一個float對象，這段內(nèi)容必須要么是inline級的，要么也設置為相同方向的float·一個f
5、loat對象，如果沒有設置寬度，則會自動縮成其包含的內(nèi)容的寬度，因此最好為float對象明確設置寬度·如果一個block對象包含float子對象，會出現(xiàn)本文中闡述的問題?！ひ粋€設置了clear屬性的對象，將不會包圍其前面的float對象·一個既設置了clear又設置了float屬性的對象，只有clear:left屬性生clear:right不起作用理解block級和inline級對象的區(qū)別下圖講解了block級對象和inline級對象的區(qū)別:下面是block級對象和inline級對象的基本區(qū)別:·Block級對象會自然地水平充
6、滿其父容器，因此沒有必要為之設置100%寬度屬性·Block級對象的起始擺放位置是其父容器的左上邊界，并順排在其前面的兄弟Block對象的下方（除非設置float或絕對位置）·Inline級對象會忽略其寬度和高度設置·Inline級對象會隨著文字排版，并受排版屬性的影響（如white-space,font-size,letter-spacing）·Inline級對象可以使用vertical-align屬性控制其垂直對齊，block級對象不可以·Inline級對象的下方會保留一些自然的空間，以適應字母g一類的會向下探出的筆畫·一
7、個設置為float的inline對象將變成block對象首先使用IE進行測試?由于微軟的xp系統(tǒng)默認是IE6，目前IE6的用戶還是有很大的比例。雖然我們都痛恨IE6和IE7，但當你開始一個新項目的時候，最好還是首先針對這兩種瀏覽器進行測試，否則，如果你在設計在后期才想起針對IE6和IE7進行測試，將出現(xiàn)以下問題：·你將不得不使用一些奇巧淫技，甚至使用獨立的IE6/7CSS，導致CSS文件臃腫?！つ承┑胤降牟季謱⒉坏貌恢匦略O計·會增加測試的時間·你的布局在IE/6/7中和其它瀏覽器中不一樣現(xiàn)在firefox對網(wǎng)頁的解釋最為準確，
8、如果你設計的是個人項目，Web程序等，則不建議你針對舊版本IE做太多工作，而對一些公司類站點，它的用戶群中有大量IE用戶，這些技巧會讓你避免大量的頭痛。如果將IE的問題歸類為IE的BUG而不去處理，會帶來很多負面的影響，和IE和平共處是Web開發(fā)與設計者不可逃避的現(xiàn)實。譯者注
