如何解決DIV+CSS建站時對瀏覽器的兼容性問題

這篇文章給大家介紹如何解決DIV+CSS建站時對瀏覽器的兼容性問題，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

DIV+CSS建站對瀏覽器的兼容性問題和注意事項

使用DIV+CSS構(gòu)架好處不少，但也確實存在一些問題，現(xiàn)在讓網(wǎng)頁設(shè)計師最頭疼的事莫過于DIV+CSS對瀏覽器的兼容性了，可能你用慣了IE6，做出來的東西沒感覺到有多大異常，但是把同樣的東西放到IE7里去看的話，就會發(fā)現(xiàn)很多問題，如果放到火狐瀏覽器里去看，結(jié)果更不盡人意。

一個頁面從制作的開始就決定了他要使用的瀏覽器解析css模式，瀏覽器模式的不同，就造成了各個瀏覽器對頁面顯示的差異。瀏覽器解析css有兩種模式,quirksmode和strictmode,目前正在使用的瀏覽器這兩種模式都支持，在doctype聲明中,沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時，基本所有的瀏覽器都是使用quirksmode呈現(xiàn)，其他的則使用strictmode解析。

這兩種模式***的不同就是提現(xiàn)在對盒模式的解釋上。什么是盒模式？這是針對塊級元素說的，這里簡單說一下，說白了就是把塊級元素想像成一個裝東西的盒子，而margin,padding,border,width這些css屬性構(gòu)成了盒模式。而區(qū)別就是產(chǎn)生在width屬性上。

◆在strictmode中：

width是內(nèi)容寬度，也就是說,元素真正的寬度=margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right;

◆在quirksmode中：

width則是元素的實際寬度，內(nèi)容寬度=width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)

DIV+CSS建站時要注意的事項：

◆內(nèi)聯(lián)元素，例如<a>、<span>等，定義上下邊界不會影響到行高(line-height)，內(nèi)聯(lián)元素距離上一行元素的距離由行高決定，而不是填充或邊界。注2.內(nèi)聯(lián)元素(display:inline)內(nèi)聯(lián)元素不需要在新行內(nèi)顯示，而且也不強迫其后的元素?fù)Q行，如a、em、span等都為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素可以為任何其他元素的子元素。

◆浮動元素(無論左或者右浮動)邊界不壓縮，且若浮動元素不聲明寬度，則其寬度趨向于0，即壓縮到其內(nèi)容能承受的最小寬度。

◆如果盒中沒有內(nèi)容，則即使定義了寬度和高度都為100%，實際上只占0%，因此不會被顯示，此點在采取層布局的時候需特別注意。

◆邊界值可為負(fù)，其顯示效果各瀏覽器可能不相同。

◆填充值不可為負(fù)。

◆邊框默認(rèn)的樣式(border-style)為不顯示(none)

其他注意事項：

1.float的div一定要閉合，即清除浮動

示例：(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)

<div> <dividdivid="floatA"></div> <dividdivid="floatB"></div> <dividdivid="NOTfloatC"></div> </div>

這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。
所以得在<divid="floatB"></div>后邊加清除浮動<divclass="clear"></div>
定義如下.clear{clear:both;}

2.注意margin加倍的問題

現(xiàn)在DIV+CSS布局里用的最多的要數(shù)margin和padding了(為了兼容性都盡量少用),設(shè)置為float浮動后的div在ie下設(shè)置的margin會加倍，所以要在這個div里面加上display:inline;
示例：<divid="FloatA"></div>
相應(yīng)的css為

#FloatA{  float:left;  margin:5px;/*IE下理解為10px*/  display:inline;/*IE下再理解為5px*/  }

說了這么多，歸根結(jié)底還是CSS的解釋問題，所以在以后制作DIV+CSS頁面時要遵循W3C標(biāo)準(zhǔn)，聲明doctype，讓瀏覽器按strictmode模式解析CSS，時刻注意IE6、IE7及火狐瀏覽器的差異，就會避免很多兼容性問題，做出更好的作品來。

關(guān)于如何解決DIV+CSS建站時對瀏覽器的兼容性問題就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。