本文和大家重點討論一下DIV+CSS建站對浏覽器的兼容性問題和注意事項，相信本文介紹一定會讓你有所收獲。
DIV+CSS建站對浏覽器的兼容性問題和注意事項
使用DIV+CSS構架好處不少，但也確實存在一些問題，現在讓網頁設計師最頭疼的事莫過於DIV+CSS對浏覽器的兼容性了，可能你用慣了IE6，做出來的東西沒感覺到有多大異常，但是把同樣的東西放到IE7裡去看的話，就會發現很多問題，如果放到火狐浏覽器裡去看，結果更不盡人意。
一個頁面從制作的開始就決定了他要使用的浏覽器解析css模式，浏覽器模式的不同，就造成了各個浏覽器對頁面顯示的差異。浏覽器解析CSS有兩種模式,quirksmode和strictmode,目前正在使用的浏覽器這兩種模式都支持，在doctype聲明中,沒有使用DTD聲明或者使用HTML4以下（不包括Html4）的DTD聲明時，基本所有的浏覽器都是使用quirksmode呈現，其他的則使用strictmode解析。
這兩種模式最大的不同就是提現在對盒模式的解釋上。什麼是盒模式？這是針對塊級元素說的，這裡簡單說一下，說白了就是把塊級元素想像成一個裝東西的盒子，而margin,padding,border,width這些CSS屬性構成了盒模式。而區別就是產生在width屬性上。
◆在strictmode中：
width是內容寬度，也就是說,元素真正的寬度=margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right;
◆在quirksmode中：
width則是元素的實際寬度，內容寬度=width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)
DIV+CSS建站時要注意的事項：
◆內聯元素，例如<a>、<span>等，定義上下邊界不會影響到行高(line-height)，內聯元素距離上一行元素的距離由行高決定，而不是填充或邊界。注2.內聯元素(display:inline)內聯元素不需要在新行內顯示，而且也不強迫其後的元素換行，如a、em、span等都為內聯元素。內聯元素可以為任何其他元素的子元素。
◆浮動元素(無論左或者右浮動)邊界不壓縮，且若浮動元素不聲明寬度，則其寬度趨向於0，即壓縮到其內容能承受的最小寬度。
◆如果盒中沒有內容，則即使定義了寬度和高度都為100%，實際上只占0%，因此不會被顯示，此點在采取層布局的時候需特別注意。
◆邊界值可為負，其顯示效果各浏覽器可能不相同。
◆填充值不可為負。
◆邊框默認的樣式(border-style)為不顯示(none)
其他注意事項：
1.float的div一定要閉合，即清除浮動
示例：(其中floatA、floatB的屬性已經設置為float:left;)
- <div>
- <dividdivid="floatA"></div>
- <dividdivid="floatB"></div>
- <dividdivid="NOTfloatC"></div>
- </div>
這裡的NOTfloatC並不希望繼續平移，而是希望往下排。這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標簽，必須將float標簽閉合。
所以得在<divid="floatB"></div>後邊加清除浮動<divclass="clear"></div>
定義如下.clear{clear:both;}
2.注意margin加倍的問題
現在DIV+CSS布局裡用的最多的要數margin和padding了(為了兼容性都盡量少用),設置為float浮動後的div在IE下設置的margin會加倍，所以要在這個div裡面加上display:inline;
示例：<divid="FloatA"></div>
相應的CSS為
- #FloatA{
- float:left;
- margin:5px;/*IE下理解為10px*/
- display:inline;/*IE下再理解為5px*/
- }
說了這麼多，歸根結底還是CSS的解釋問題，所以在以後制作DIV+CSS頁面時要遵循W3C標准，聲明doctype，讓浏覽器按strictmode模式解析CSS，時刻注意IE6、IE7及火狐浏覽器的差異，就會避免很多兼容性問題，做出更好的作品來。
【編輯推薦】