分(fēn)享編寫CSS樣式易犯細節性錯(cuò)誤

來(lái)源：徐州億網網絡科(kē)技(≥<↕§jì)有(yǒu)限公司 時(shí)間(ji★☆↕ān)：2013-04-01 作(zuò)者：

徐州億網認為(wèi)，即便你(nǐ)是(shì)一(yī)個(gèαγ)編寫CSS樣式的(de)高(gāo)手，也(yě)不(bù)可(₽$ ∞kě)以避免的(de)在編寫CSS代碼中出現(xiàn)細節性的(de)♣'錯(cuò)誤，我們應該重視(shì)它，因為(wèi)小(xiǎo)錯(c>‍ ₽uò)誤卻往往造成大(dà)問(wèn)題，浪費(fèi)很(hěn)多(d ↔∞↑uō)無辜的(de)時(shí)間(jiān)來(lái)調試和(hé)排錯(cuò)。今'​α天徐州網站(zhàn)建設行(xíng)業(yè)領跑者徐州億網跟大(dà)家(jiā)說(shuō)說(shuō)在CSSφ↕網頁布局中容易犯的(de)10個(gè)小(xiǎo)錯(cuò)誤，與君共勉。

細節錯(cuò)誤一(yī)、HTML拼寫錯(cuò)​≤€誤、忘記結束标記

即使是(shì)老(lǎo)手也(yě)經常會(huì)弄錯(c"→uò)div的(de)嵌套關系。可(kě)以用(yòng)dreamwe≈↑↕aver的(de)驗證功能(néng)檢查一(yī)下(∞πxià)有(yǒu)無錯(cuò)誤。

細節錯(cuò)誤二、CSS書(shū)寫

檢查一(yī)下(xià)有(yǒu)無拼寫錯(cuò)誤、是(shì)否忘記結尾的(d☆ e) } 等。可(kě)以利用(yòng)CleanCSS來(lái)檢查 CSS的(de)拼寫ε‌♦"錯(cuò)誤。CleanCSS本是(shì)為(wèi)CSS減肥的(de)工(g¶>ōng)具，但(dàn)也(yě)能(néng)檢查出拼寫錯(cuò)誤。

細節錯(cuò)誤三、用(yòng)删除法确定錯←β(cuò)誤發生(shēng)的(de)位置

如(rú)果錯(cuò)誤影(yǐng)響了(le)整體( ♠αtǐ)布局，則可(kě)以逐個(gè)删除div塊，直到(dào)删除某個(gè)di®βv塊後顯示恢複正常，即可(kě)确定錯(cuò)誤發生(shēng)的(de)位置。

細節錯(cuò)誤四、利用(yòng)border屬性确定出錯(c↓↕uò)元素的(de)布局特性

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

細節錯(cuò)誤五、float元素的(de✘ Ω♥)父元素不(bù)能(néng)指定clear屬性

MacIE下(xià)如(rú)果對(duì)fl↓∑§←oat的(de)元素的(de)父元素使用(yòng)clear屬性，周圍的(de)÷←₹float元素布局就(jiù)會(huì)混亂。這(zhè)是(shì)MacIE的(d '→¥e)著名的(de)bug，倘若不(bù)知(zhī)道(dào)就(j¶₹±≠iù)會(huì)走彎路(lù)。

細節錯(cuò)誤六、float元素務必指定width屬性

很(hěn)多(duō)浏覽器(qì)在顯示未指定width的(de)float元素時(s♥✔πhí)會(huì)有(yǒu)bug。所以不(bù)£γ¶管float元素的(de)內(nèi)容如(rú)何，一(yī)定要(yào)為(wèi)其₹★♣"指定width屬性。

另外(wài)指定元素時(shí)盡量使用(yòng)em而不(bù)是(shì)px做(≥‌ αzuò)單位。

細節錯(cuò)誤七、float元素不(bù)能↕•σ(néng)指定margin和(hé)paddi‍÷♣‌ng等屬性

IE在顯示指定了(le)margin和(hé)padding的(de)float元素↔₩Ω時(shí)有(yǒu)bug。因此不(bù)要(yào)對(du' ì)float元素指定margin和(hé)padding屬性（可(kě)以在→β®×float元素內(nèi)部嵌套一(yī)個(gè)div來(lái)設置↔$↓margin和(hé)padding）。也(yě)可(kě)以使用(yòng)hackβ​≥¥方法為(wèi)IE指定特别的(de)值。

細節錯(cuò)誤八、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"÷β%。

細節錯(cuò)誤九、是(shì)否重設了(le)π↓↑‌默認的(de)樣式？

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

細節錯(cuò)誤十、是(shì)否忘記了(le)寫DTD？

如(rú)果無論怎樣調整不(bù)同浏覽器(qì)顯示結果還(hái)是  (shì)不(bù)一(yī)樣，那(nà)麽可(kě)以檢查一(yī)下(xi✔σ✔à)頁面開(kāi)頭是(shì)不(bù)是(shαε♥∞ì)忘了(le)寫下(xià)DTD聲明(míng)。

以上(shàng)是(shì)由徐州網站(zhàn)建設專家(jiā)徐州γ¶★→億網提供，轉載請(qǐng)注明(míng)：徐州億網網絡公司 http://www.exz.cn/ 謝(xiè)謝(xiè)~~

• 上(shàng)一(yī)篇: 談一(←☆yī)談網站(zhàn)建設設計(jì)師(shī)的(de)耐性
• 下(xià)一(yī)篇: 解析網頁代碼中的(de)注釋是(shì)否會(huì)造𶩧成冗餘