做(zuò)w3c網站(zhàn)容易出現(xiàn>≤)的(de)DIV布局錯(cuò)誤

      ☆γ  使用(yòng)DIV布局時(shí)還(hái)帶有(yǒu)不(bù)少(s ✔hǎo)操作(zuò)表格時(shí)的(de)思想和(hé)習(xí)慣，以至于出了(le‌α )不(bù)少(shǎo)的(de)錯(c∞"→λuò)誤，在此徐州網絡公司把容易出錯(cuò)的(de)一(yī)些(♠φ™≈xiē)細節整理(lǐ)出來(lái)，希望對(duì★€<)初學的(de)朋(péng)友(yǒu)能(néng)有(yǒu)所幫助。

        1.最常見('± jiàn)的(de)DIV嵌套錯(cuò)誤

     &nbs←λΩp;  因為(wèi)xhtml 語法比較嚴格，諸如(rú)Firefox 之類的(​€&de)浏覽器(qì)如(rú)果檢查發現(xiàn)Xhtml≤≤Ω裡(lǐ)面有(yǒu)語法錯(cuò)誤₽♦✘，那(nà)頁面是(shì)不(bù)能(néng)正常顯示的(de)。剛剛開(kāi♣‍♥<)始學習(xí)DIV布局的(de)時(shí)候經常‍↑π®會(huì)弄錯(cuò)DIV的(de)嵌套關系。我們可(kě)以用(yòng)Dre$<<amweaver的(de)驗證功能(néng)檢查一(yī>≈Ω¶)下(xià)有(yǒu)無這(zhè)方面的(de)‍π錯(cuò)誤。
 

        2.由于↓×€£粗心造成的(de)标點錯(cuò)誤
     &σσnbsp;  開(kāi)始一(yī)味追求速度，在标點方面不(bù♦α )太注意，到(dào)最後發現(xiàn)有(yǒu)' φ>些(xiē)屬性不(bù)起作(zuò)用(yò♠₩♠ng)。最容易出錯(cuò)的(de)例如(rú)：
       ↕ ; 正确：class=” “，錯(cuò)誤：class=&£↔§↓ldquo; ”（标點的(de)中英文(wén)切換）
   &nbs↓α≠p;    ♠✔÷正确：font-size: 12px;，≠γ$ 錯(cuò)誤：font-size: 12px；（标點的(de)中英文(wén)切換）
        正≈♠确：text-decoration: underline;，錯(↓​cuò)誤：text_decoration: ✘Ω→underline;（是(shì)中劃線←‌而非下(xià)劃線）
      &nb€↓sp; 正确：img {border: 0;}錯(cuò)誤：img÷"" {border: 0; （注意後邊的(de)”}”符号 ≈）
     &nbsΩ>§p;  正确：

---

錯(cuò)誤：

---

（這(zhè)個(gè)錯(cuò)誤隻是(shì)個(×£÷≈gè)不(bù)好(hǎo)的(de)習(x×♥í)慣，不(bù)符合标準的(de)寫法，這(zhè)種單标δ↓簽一(yī)定要(yào)閉合）

      →♣  3.在使用(yòng)float元素時(shí)出現 ♣¶(xiàn)內(nèi)容撐開(kāi)的(de)問(wèn)題
   &nbs₹™•p;   γ$₹ 在使用(yòng)左浮動或者右浮動的(de)時(‌>>₹shí)候一(yī)定要(yào)保證float元素的(de)寬度之和(hé)小(xiǎβγ<o)于或者等于100%，一(yī)般比較保險的(de)做(zuò)法是(shì)要(₽♣↕₽yào)小(xiǎo)于98%。

   &nbs"<p;    4.float£<α元素的(de)父元素不(bù)能(néng)指定♠☆clear屬性
     &nb✔↓sp;  在MacIE下(xià)如(rú)果對(duì)float的(de)元素☆'∑的(de)父元素使用(yòng)clear屬性，周圍的(de)float元₽✘素布局就(jiù)會(huì)混亂。這(zhè)是(shì)♥¶≠←MacIE的(de)著(zhe)名的(de)bug，倘<$¶若不(bù)知(zhī)道(dào)就(jiù)會(huì)走彎路(lù)↔&↕↔。

        ∏$≠∞5.重新定義一(yī)些(xiē)默認的(de)樣式
        某​<γ÷些(xiē)屬性如(rú)ul、li、margin、padding等，不(bù)同浏覽∞&$β器(qì)會(huì)有(yǒu)不(bù)同的(de)解釋。因此最好(hǎo)在開(kāi)始¥↓π₩布局之前先将全體(tǐ)的(de)margin、padding設置為(wèi)0；ul、li列表"<★☆樣式設置為(wèi)none等。

        6.f÷←loat元素最好(hǎo)不(bù)要(yào)指定mar ±gin和(hé)padding屬性
      &nb&→‌Ωsp; IE在顯示指定了(le)margin和(hé)padd‍↓↕♥ing的(de)float元素時(shí)有(yǒu)bug。因此不(bù)要(y±¶εào)對(duì)float元素指定margin和(hé)padding屬性(合理(lǐ)的(φ λde)做(zuò)法：可(kě)在float元素內(nèi)部嵌套一(yī)個(gè)div來↑φ (lái)設置margin和(hé)padding)。

    &nbs♥©p;   7.float元素一(yī§∑)定要(yào)指定width屬性
    &©€nbsp;   很(hěn)多(duō)  ₽•浏覽器(qì)在顯示未指定width的(de)float元素時(shí)會(huì±≥)有(yǒu)bug。所以不(bù)管float∏↑✔φ元素的(de)內(nèi)容如(rú)何，一(yī)定要(yào)為(wèi)÷↑>×其指定width屬性。

      &nbs↔→₽p; 8. 是(shì)否忘記了(le)寫DTD
      π±≈;  如(rú)果無論怎樣調整不(bù)同浏覽器(qì)顯示結果還(hái)是(s↔™hì)不(bù)一(yī)樣，那(nà)麽可(kě)≈‍φ以檢查一(yī)下(xià)頁面開(kāi)頭是(shì)不(bù)是(shì)忘₽β×​了(le)寫下(xià)面這(zhè)行(xíng)DTD：

    &n×‍✘bsp;   最好(hǎo)的(de)做(zuò)法是(shì→γ∑)用(yòng)Dreamweaver專業(yè)軟件(j♠♠iàn)直接新建網站(zhàn)頁面，這(zhè)樣可(kě'δ)以保證不(bù)會(huì)出錯(cuò)。

    δπ§    簡單的(de)排除錯(cuò)誤的(de)一($✔ yī)些(xiē)方法：

1. 大(dà)概确定錯(cuò)誤發生(shēng)™≈的(de)位置
   如(rú)果因為(wèi)小(xiǎo)錯(cuò &€®)誤影(yǐng)響了(le)整體(tǐ)布局，可(kě)以逐個(g© ®è)删除div塊，直到(dào)删除某個(gè)div塊後顯示恢複正常，即可(kě)确定錯(≠¶↑αcuò)誤發生(shēng)的(de)位置。
2. 利用(yòng)border屬性解決Float布局錯(cuò)誤
   使用(yòng)float屬性布局一(yī)不(bù)小(xiǎoφ$≤)心就(jiù)會(huì)出錯(cuò)。這(zhè)α±λ時(shí)為(wèi)相(xiàng)關元素添加border屬>±性以确定元素邊界，錯(cuò)誤原因即水(shuǐ)落石出。

    Ωγ    本文(wén)由徐州億網網絡公>​司(http://www.exz.cn)原創，轉載請(qǐng)注明(míng)謝(xiè)謝(xiè)！