徐州網絡公司淺析用(yòng)DIV+CSS做(zuò)設計₹→(jì)頁面時(shí)的(de)常見(jiàn↔♠)錯(cuò)誤

來(lái)源：徐州億網網絡科(kē)技(jì)有(yǒu)限公司 時(sh  ♥í)間(jiān)：2012-03-08 作(zuò)者：

以下(xià)是(shì)徐州網絡公司針對(duì)一(yī)些(xiē)DIV+CS∏ S設計(jì)頁面時(shí)的(de)常見(jiàn)錯(cuò)誤&δ♠±提出的(de)預防技(jì)巧，希望能(néng)對(duì)大(dà)家(jiā)有φ¥(yǒu)所幫助。

　　1. 檢查HTML元素是(shì)否有(yǒ ​u)拼寫錯(cuò)誤、是(shì)否忘記結束标記

　　     即使是(δ∞∏shì)老(lǎo)手也(yě)經常會(huì)•™弄錯(cuò)div的(de)嵌套關系。可(kě)以用(yòng)drea∞♦←±mweaver的(de)驗證功能(néng)檢查一(yī)下(x±φ×£ià)有(yǒu)無錯(cuò)誤。

　　2. 檢查CSS是(shì)否正确

　　     檢查一(yī)下(xià)有(yǒπ®  u)無拼寫錯(cuò)誤、是(shì)否忘δ↓記結尾的(de) } 等。可(kě)以利用(yòng)Cleaγ×<↓nCSS來(lái)檢查 CSS的(de)拼寫錯(cuò)誤。φ→¥CleanCSS本是(shì)為(wèi)CSS減肥的(de)工(gōng§ )具，但(dàn)也(yě)能(néng)檢查出拼寫錯(cuò)誤。

　　3. 确定錯(cuò)誤發生(shēng)的(de)位置

　　     假如(rú₹σ&≤)錯(cuò)誤影(yǐng)響了(le)整體(tǐ↓λ&♣)布局，則可(kě)以逐個(gè)删除div塊，直到(dào)删除某個(gè)div塊後顯示恢複∑©正常，即可(kě)确定錯(cuò)誤發生(shēng)的(de)位置。

　　4. 利用(yòng)border屬性确定出錯(cuò)元素的(de)↕♣αε布局特性

　　     使用(yòng)float屬性布局一(yī ✔​)不(bù)小(xiǎo)心就(jiù)會(huì)出錯(cuò)。這(zhè✘€‌)時(shí)為(wèi)元素添加border屬性确定元素邊界，錯(cuò)誤₹σ原因即水(shuǐ)落石出。

　　5. float元素的(de)父元素不(bù≤₹Ω)能(néng)指定clear屬性

　　      Mac≥ε≠¥IE下(xià)假如(rú)對(duì)float的(de)元素的(de ♦)父元素使用(yòng)clear屬性，四周的(de)float元素布局就(jiù☆✔)會(huì)混亂。這(zhè)是(shì)MacIE的(de)聞名$↕的(de)bug，倘若不(bù)知(zh™↑ī)道(dào)就(jiù)會(huì)走彎路(lù)。

　　6. 注意float元素務必指定width屬性

　　     很(" λ§hěn)多(duō)浏覽器(qì)在顯示未指定width的(de)★©float元素時(shí)會(huì)有(yǒu)bug。所以不α©ε(bù)管float元素的(de)內(nèi)容如(rú)→©何，一(yī)定要(yào)為(wèi)其指定width屬 ÷♣✘性。

　　    £γ ★ 另外(wài)指定元素時(shí)盡量使用(yòn÷λg)em而不(bù)是(shì)px做(zuò)單位。

　　7. 注意float元素不(bù)能(néng)指定m'≥₩argin和(hé)padding等屬性

　　     IE在顯示指定了(le)margiΩ∞ n和(hé)padding的(de)float元素時(shí)有(yǒu)bug。因此不(bù&≈≥¥)要(yào)對(duì)float元素指定margin和(hé)pa ®dding屬性(可(kě)以在float元素內(nèi)部嵌♠→♣•套一(yī)個(gè)div來(lái)設置margin和(hé)padding)。也(y₽→↑ě)可(kě)以使用(yòng)hack方法為(wèi)IE指定非凡的(de)值。

　　8. 确保float元素的(de)寬®<ε≤度之和(hé)要(yào)小(xiǎo)于100≠<€%

　　    假如(rú)float元素的(de)寬度之和(hé)βγ₹✔正好(hǎo)是(shì)100%，某些(xiē)古老(lǎo)的(de∞¶♥)浏覽器(qì)将不(bù)能(néng)正常顯示。因此請(qǐng)保證☆×寬度之和(hé)小(xiǎo)于99%。

　　9. 檢查是(shì)否重設了(le)默認的(de)樣式

　　     某些(xiē)屬性如(rú)margin、p♠∏☆adding等，不(bù)同浏覽器(qì)會(huì)有(yǒu)不(bù)同₩≈的(de)解釋。因此最好(hǎo)在開(kāi)發前首先将全體(tǐ)的(♠∏de)margin、padding設置為(wèi)0、列表樣式設置為(wèi∏♠)none等。

　　10. 檢查是(shì)否忘記了(le)寫DTD

　　     &®≥nbsp; 假如(rú)無論怎樣調整不(b×Ωù)同浏覽器(qì)顯示結果還(hái)是(shì)不(bù)一(yī)樣，那(nà)麽✔Ω"可(kě)以檢查一(yī)下(xià)頁面開(kāi≤∏₹)頭是(shì)不(bù)是(shì)忘了(le)寫下(xià)&≈面這(zhè)行(xíng)DTD：

　　< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TransITional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

本文(wén)由徐州億網網絡公司提供，如(rú)有(yǒu)疑問(wèn)，可(kě)以咨詢≥±www.exz.cn

 

• 上(shàng)一(yī)篇: 做(zuò)w3c網站(zhàn)容易出現(  xiàn)的(de)DIV布局錯(cuò)誤
• 下(xià)一(yī)篇: 徐州億網淺談做(zuò)網站(zhà✔★✘€n)如(rú)何兼容ie6常見(jiàn)問(wèn)題