CSS中的網(wǎng)頁(yè)布局常見問題有哪些

這篇文章主要為大家展示了“CSS中的網(wǎng)頁(yè)布局常見問題有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS中的網(wǎng)頁(yè)布局常見問題有哪些”這篇文章吧。

一、有疑問，先驗(yàn)證

在調(diào)試時(shí)，先對(duì)您的代碼進(jìn) 行驗(yàn)證往往能省去不少麻煩事。格式不正確的XHTML/CSS 會(huì)導(dǎo)致許多布局上的錯(cuò)誤。

在其他瀏覽器中進(jìn)行測(cè)試之前，請(qǐng)先在最先進(jìn)的瀏覽器 中撰寫和測(cè)試CSS代碼，而不是相反。

如果您在破舊的瀏覽器中編寫和測(cè)試，你的代碼就不得不依賴那個(gè)破舊瀏覽器的糟糕的顯示，然后在符合標(biāo)準(zhǔn) 的瀏覽器中進(jìn)行測(cè)試，看到顯示結(jié)果“不正?！?時(shí)，你會(huì)很沮喪的。相反，您應(yīng)該先將您的代碼完善，然后再設(shè)法為較低級(jí)的瀏覽器打算。這樣從一開始您的代碼就是符合標(biāo)準(zhǔn)的，你不必再為支持其他瀏覽器而勞 心費(fèi)神。當(dāng)然了，目前遵從標(biāo)準(zhǔn)的瀏覽器無疑就是 Mozilla， Safari 或 Opera。

二、確保您期望的效 果確實(shí)存在

許多特定的瀏覽器專有的CSS擴(kuò)展在正式標(biāo)準(zhǔn)中并不存在。 如果您對(duì) filter（濾鏡）或滾動(dòng)條指定了樣式，那么您就用了私有代碼，除了IE之外，在別的瀏覽器中毫無作用。如果驗(yàn)證器告訴您代碼沒有定義，極有可能您用了 私有樣式，這樣在不同的瀏覽器中很難達(dá)到一致的效果。

如果布局中一定要用浮動(dòng)對(duì)象，別忘了適時(shí)使用清除（clear）屬性。

浮動(dòng) 對(duì)象似易實(shí)難，而且不總是令人如愿以償。如果您發(fā)現(xiàn)浮動(dòng)對(duì)象伸出了容器的邊界，或者不像您所期望的那樣顯示，請(qǐng)檢查您的期望是否正確。關(guān)于這個(gè)問題請(qǐng)看 Eric Meyer的教程

邊距的合并：可用padding 或 border 來避免。

您可能被多余的（或者想要卻不出現(xiàn)的） 空白搞得焦頭爛額。如果您用了 margins，邊距的合并可能就是問題的根源。 Andy Budd 對(duì)此的解釋可能為你解惑。

避免將 padding/border 和固定寬度同時(shí)應(yīng)用到同一元素。

IE5 的區(qū)塊模型是錯(cuò)誤的，是它把事情辦壞了。對(duì)此也有權(quán)宜之計(jì)，不過最好是繞過這個(gè)問題，當(dāng)子元素的寬度固定時(shí)，為父元素指定padding。

三、 避免IE下未指定樣式內(nèi)容的閃爍。

如果您僅僅靠 @imp

ort 來輸入外部樣式表，早晚您會(huì)發(fā)現(xiàn)IE有“閃爍”的毛病。在應(yīng)用CSS樣式之前，未經(jīng)格式化的HTML文本會(huì)短暫地出現(xiàn)。這是可以避免的。

四、 別指望 min-width 在IE中有用。

IE不支持它，但是它將 width 當(dāng)作 min-width，所以通過一些 IE 的過濾技巧（filtering），可以實(shí)現(xiàn)同樣的最終效果。

把CSS過濾器（filters）當(dāng) 作最后的手段

CSS 技巧和過濾器可以使您有選擇地應(yīng)用到（或者不應(yīng)用到）某些元素。應(yīng)當(dāng)盡可能地找到標(biāo)準(zhǔn)的跨瀏覽器的解決辦法來實(shí)現(xiàn)您想要的效果，而不是動(dòng)不動(dòng)就使用過濾 器。要將它當(dāng)成走投無路時(shí)的救命手段。在這里可以找到大量的CSS 過濾技巧。［譯注：不要把這里的filters和IE中的濾鏡混淆。由于各個(gè)瀏覽器對(duì)CSS標(biāo)準(zhǔn)的支持程度不一，人們找到了許多技巧，將瀏覽器無法解釋或 錯(cuò)誤解釋的樣式表或規(guī)則屏蔽掉。這就是所謂的CSS過濾器或技巧。webjx.com

如果使用了錨點(diǎn)，在應(yīng)用超鏈接樣式時(shí)要特別小心。

如果您在代碼中使用了傳統(tǒng)的錨點(diǎn)（），您會(huì)注意到 ：hover 和 ：active偽類也會(huì)作用于它。要避免這種情形，你可以使用 id，或者使用鮮為人知的語法： ：link:hover， ：link:active

以上是“CSS中的網(wǎng)頁(yè)布局常見問題有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！