DIV+CSS建站時(shí)對(duì)瀏覽器的兼容性問題解決
本文和大家重點(diǎn)討論一下DIV+CSS建站對(duì)瀏覽器的兼容性問題和注意事項(xiàng)，相信本文介紹一定會(huì)讓你有所收獲。
DIV+CSS建站對(duì)瀏覽器的兼容性問題和注意事項(xiàng)
使用DIV+CSS構(gòu)架好處不少，但也確實(shí)存在一些問題，現(xiàn)在讓網(wǎng)頁設(shè)計(jì)師最頭疼的事莫過于DIV+CSS對(duì)瀏覽器的兼容性了，可能你用慣了IE6，做出來的東西沒感覺到有多大異常，但是把同樣的東西放到IE7里去看的話，就會(huì)發(fā)現(xiàn)很多問題，如果放到火狐瀏覽器里去看，結(jié)果更不盡人意。
一個(gè)頁面從制作的開始就決定了他要使用的瀏覽器解析css模式，瀏覽器模式的不同，就造成了各個(gè)瀏覽器對(duì)頁面顯示的差異。瀏覽器解析css有兩種模式,quirksmode和strictmode,目前正在使用的瀏覽器這兩種模式都支持，在doctype聲明中,沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時(shí)，基本所有的瀏覽器都是使用quirksmode呈現(xiàn)，其他的則使用strictmode解析。
這兩種模式***的不同就是提現(xiàn)在對(duì)盒模式的解釋上。什么是盒模式？這是針對(duì)塊級(jí)元素說的，這里簡單說一下，說白了就是把塊級(jí)元素想像成一個(gè)裝東西的盒子，而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則是元素的實(shí)際寬度，內(nèi)容寬度=width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)
DIV+CSS建站時(shí)要注意的事項(xiàng)：
◆內(nèi)聯(lián)元素，例如<a>、<span>等，定義上下邊界不會(huì)影響到行高(line-height)，內(nèi)聯(lián)元素距離上一行元素的距離由行高決定，而不是填充或邊界。注2.內(nèi)聯(lián)元素(display:inline)內(nèi)聯(lián)元素不需要在新行內(nèi)顯示，而且也不強(qiáng)迫其后的元素?fù)Q行，如a、em、span等都為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素可以為任何其他元素的子元素。
◆浮動(dòng)元素(無論左或者右浮動(dòng))邊界不壓縮，且若浮動(dòng)元素不聲明寬度，則其寬度趨向于0，即壓縮到其內(nèi)容能承受的最小寬度。
◆如果盒中沒有內(nèi)容，則即使定義了寬度和高度都為100%，實(shí)際上只占0%，因此不會(huì)被顯示，此點(diǎn)在采取層布局的時(shí)候需特別注意。
◆邊界值可為負(fù)，其顯示效果各瀏覽器可能不相同。
◆填充值不可為負(fù)。
◆邊框默認(rèn)的樣式(border-style)為不顯示(none)
其他注意事項(xiàng)：
1.float的div一定要閉合，即清除浮動(dòng)
示例：(其中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>后邊加清除浮動(dòng)<divclass="clear"></div>
定義如下.clear{clear:both;}
2.注意margin加倍的問題
現(xiàn)在DIV+CSS布局里用的最多的要數(shù)margin和padding了(為了兼容性都盡量少用),設(shè)置為float浮動(dòng)后的div在ie下設(shè)置的margin會(huì)加倍，所以要在這個(gè)div里面加上display:inline;
示例：<divid="FloatA"></div>
相應(yīng)的css為
- #FloatA{
- float:left;
- margin:5px;/*IE下理解為10px*/
- display:inline;/*IE下再理解為5px*/
- }
說了這么多，歸根結(jié)底還是CSS的解釋問題，所以在以后制作DIV+CSS頁面時(shí)要遵循W3C標(biāo)準(zhǔn)，聲明doctype，讓瀏覽器按strictmode模式解析CSS，時(shí)刻注意IE6、IE7及火狐瀏覽器的差異，就會(huì)避免很多兼容性問題，做出更好的作品來。
【編輯推薦】
- CSS布局時(shí)需注意的八大技巧
- IE6.0對(duì)padding的解讀分析
- 揭露CSS中margins折疊現(xiàn)象內(nèi)幕
- DIV CSS隱藏內(nèi)容樣式方法揭秘
- DIV CSS網(wǎng)頁布局中對(duì)段落進(jìn)行排版的方法
