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

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

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

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

    在quirks mode中：
    width則是元素的實(shí)際寬度 ，內(nèi)容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

    其他要注意的事項(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)元素(無(wú)論左或者右浮動(dòng))邊界不壓縮 ，且若浮動(dòng)元素不聲明寬度，則其寬度趨向于0，即壓縮到其內(nèi)容能承受的最小寬度。
    ·如果盒中沒(méi)有內(nèi)容，則即使定義了寬度和高度都為100%，實(shí)際上只占0% ，因此不會(huì)被顯示，此點(diǎn)在采取層布局的時(shí)候需特別注意。
    ·邊界值可為負(fù)，其顯示效果各瀏覽器可能不相同 。
    ·填充值不可為負(fù) 。
    ·邊框默認(rèn)的樣式(border-style)為不顯示(none)

    下面來(lái)說(shuō)說(shuō)IE6，IE7及FF火狐瀏覽器的區(qū)別和兼容方法：
1. IE7與IE6相比, 有多達(dá)200多處改進(jìn), 但它們都是在Strict Mode下實(shí)現(xiàn)的, 即在頁(yè)首聲明DocType為XHTML Transitional, XHTML Strict等. 而在Quirks Mode下, IE7和IE6別無(wú)二致。所以為了更好的兼容，盡量聲明DocType，采用Strict Mode進(jìn)行制作。
2. IE7支持Alpha通道的PNG圖片， 但是這些Alpha通道圖片在IE6下還是不能正常顯示的，所以還是盡量使用透明GIF圖片。
3. IE7盒子模型改變了：盒子對(duì)于"overflow"使用了"visible"默認(rèn)值,所以對(duì)于子元素尺寸大于父元素尺寸時(shí), IE7會(huì)和Firefox一樣將子元素露出于父元素之外顯示, 而不是像IE6那樣把父元素?fù)未罅税釉?把頁(yè)面設(shè)置成"overflow:visible"即可。
4. 設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍。這是一個(gè)ie6存在的bug。解決方案是在這個(gè)div里面加上"display:inline"。
5. IE和火狐對(duì)'width'定義的不同：
     Firefox中：容器占的寬度=內(nèi)容寬度+padding寬度+border寬度；
     IE中：內(nèi)容寬度=您定義的容器寬度(Internet Explorer 'width')-padding寬度-border寬度
     (Internet Explorer 'width'則是指整個(gè)容器的寬度，包括內(nèi)容，padding ，border)

6. css布局的居中問(wèn)題：FF火狐里設(shè)置margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE則設(shè)置body {TEXT-ALIGN: center;} 才行
7. FF火狐設(shè)置padding后, div會(huì)增加height和width, 但I(xiàn)E不會(huì), 故需要用 !important 多設(shè)一個(gè)height和width
8. 在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：div{margin:30px!important;margin:28px;}
9. ul標(biāo)簽在FF火狐中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}
10.終結(jié)解決方法：
    (1)!important：FF火狐和IE7對(duì)于"!important"會(huì)自動(dòng)優(yōu)先解析，IE6則忽略,可用!important為FF火狐和IE7單獨(dú)設(shè)置樣式，不影響IE6的顯示，值得注意的是，一定要將xxxx !important 這句放置在另一句之上。
       示例：div{margin:30px!important;margin:15px;} //在FF火狐和IE7中margin:30px，在IE6中margin:15px;
    (2)由于FF火狐和IE7都支持"!important"，而二者之間也存在差異，所以有時(shí)也會(huì)出現(xiàn)一些小問(wèn)題，針對(duì)IE7可以使用使用"*+html"，
       示例：#example { color: #333; } /* FF火狐下字體顏色顯示為#333 */
             * html #example { color: #666; } /* IE6下字體顏色顯示為#666 */
             *+html #example { color: #999; } /* IE7下字體顏色顯示為#999 */

    其他注意事項(xiàng)：

1. float的div一定要閉合，即清除浮動(dòng)
   示例：(其中floatA、floatB的屬性已經(jīng)設(shè)置為float:left;)
         <div>
           <div id="floatA"></div>
           <div id="floatB"></div>
           <div id="NOTfloatC"></div>
         </div>
   這里的NOTfloatC并不希望繼續(xù)平移，而是希望往下排。這段代碼在IE中毫無(wú)問(wèn)題，問(wèn)題出在FF。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合。
   所以得在<div id="floatB"></div>后邊加清除浮動(dòng)<div class="clear"></div>
   定義如下.clear{clear:both;}
           
2. 注意margin加倍的問(wèn)題
   現(xiàn)在DIV+CSS布局里用的最多的要數(shù)margin和padding了(為了兼容性都盡量少用),設(shè)置為float浮動(dòng)后的div在ie下設(shè)置的margin會(huì)加倍，所以要在這個(gè)div里面加上display:inline;
   示例：<div id="FloatA"></div>
         相應(yīng)的css為
         #FloatA{
             float:left;
             margin:5px;/*IE下理解為10px*/
             display:inline;/*IE下再理解為5px*/
          }

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

烏魯木齊網(wǎng)站制作、烏魯木齊網(wǎng)站推廣、烏魯木齊網(wǎng)站排名、網(wǎng)站開(kāi)發(fā)、新疆網(wǎng)站建設(shè)、新疆網(wǎng)站推廣、新疆網(wǎng)站排名找遠(yuǎn)璨網(wǎng)絡(luò)，誠(chéng)信合作共贏的態(tài)度，為你提供更多的網(wǎng)站建設(shè)服務(wù)！咨詢電話：0991-4549085