深圳深達(dá)品牌網(wǎng)站建設(shè)公司于2005年創(chuàng)立,
以高端網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、集團(tuán)網(wǎng)站制作、響應(yīng)式網(wǎng)站建設(shè)、外貿(mào)型網(wǎng)站設(shè)計(jì)、營銷型網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作、微信網(wǎng)站建設(shè)、H5網(wǎng)站制作、電子商務(wù)網(wǎng)站設(shè)計(jì)制作、品牌設(shè)計(jì)、平面設(shè)計(jì)、網(wǎng)絡(luò)服務(wù)、品牌整合傳播策劃為核心業(yè)務(wù),
致力于高端市場,專注于品牌服務(wù)、提升企業(yè)形象!咨詢電話:0755-83769155

深圳網(wǎng)站建設(shè)、深圳網(wǎng)站設(shè)計(jì)、深圳網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、深圳網(wǎng)絡(luò)公司、品牌設(shè)計(jì)

2006版 | 咨詢電話:0755-83769155

設(shè)計(jì)觀點(diǎn)

CSS網(wǎng)頁布局開發(fā)時(shí)的常見問題小結(jié)
2011-09-03     文章來源: 建站學(xué)

  在進(jìn)行CSS網(wǎng)頁布局開發(fā)時(shí),您肯定遇到過形形色色的布局問題,雖然本站網(wǎng)頁布局頻道提供了大量的教程,但最后可能被搞得焦頭爛額。本文的目的是讓您的設(shè)計(jì)過程更為容易,當(dāng)您遇到困難時(shí)為您提供快速參考。
一、有疑問,先驗(yàn)證
  在調(diào)試時(shí),先對您的代碼進(jìn)行驗(yàn)證往往能省去不少麻煩事。格式不正確的XHTML/CSS 會導(dǎo)致許多布局上的錯(cuò)誤。
  在其他瀏覽器中進(jìn)行測試之前,請先在最先進(jìn)的瀏覽器中撰寫和測試CSS代碼,而不是相反。
  如果您在破舊的瀏覽器中編寫和測試,你的代碼就不得不依賴那個(gè)破舊瀏覽器的糟糕的顯示,然后在符合標(biāo)準(zhǔn)的瀏覽器中進(jìn)行測試,看到顯示結(jié)果“不正常” 時(shí),你會很沮喪的。相反,您應(yīng)該先將您的代碼完善,然后再設(shè)法為較低級的瀏覽器打算。這樣從一開始您的代碼就是符合標(biāo)準(zhǔn)的,你不必再為支持其他瀏覽器而勞心費(fèi)神。當(dāng)然了,目前遵從標(biāo)準(zhǔn)的瀏覽器無疑就是 Mozilla, Safari 或 Opera。
二、確保您期望的效果確實(shí)存在
  許多特定的瀏覽器專有的CSS擴(kuò)展在正式標(biāo)準(zhǔn)中并不存在。 如果您對 filter(濾鏡)或滾動條指定了樣式,那么您就用了私有代碼,除了IE之外,在別的瀏覽器中毫無作用。如果驗(yàn)證器告訴您代碼沒有定義,極有可能您用了私有樣式,這樣在不同的瀏覽器中很難達(dá)到一致的效果。
  如果布局中一定要用浮動對象,別忘了適時(shí)使用清除(clear)屬性。
  浮動對象似易實(shí)難,而且不總是令人如愿以償。如果您發(fā)現(xiàn)浮動對象伸出了容器的邊界,或者不像您所期望的那樣顯示,請檢查您的期望是否正確。關(guān)于這個(gè)問題請看Eric Meyer的教程
  邊距的合并:可用padding 或 border 來避免。
  您可能被多余的(或者想要卻不出現(xiàn)的)空白搞得焦頭爛額。如果您用了 margins,邊距的合并可能就是問題的根源。 Andy Budd 對此的解釋可能為你解惑。
  避免將 padding/border 和固定寬度同時(shí)應(yīng)用到同一元素。
  IE5 的區(qū)塊模型是錯(cuò)誤的,是它把事情辦壞了。對此也有權(quán)宜之計(jì),不過最好是繞過這個(gè)問題,當(dāng)子元素的寬度固定時(shí),為父元素指定padding。
三、避免IE下未指定樣式內(nèi)容的閃爍。
  如果您僅僅靠 @import 來輸入外部樣式表,早晚您會發(fā)現(xiàn)IE有“閃爍”的毛病。在應(yīng)用CSS樣式之前,未經(jīng)格式化的HTML文本會短暫地出現(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)成走投無路時(shí)的救命手段。在這里可以找到大量的CSS 過濾技巧。[譯注:不要把這里的filters和IE中的濾鏡混淆。由于各個(gè)瀏覽器對CSS標(biāo)準(zhǔn)的支持程度不一,人們找到了許多技巧,將瀏覽器無法解釋或錯(cuò)誤解釋的樣式表或規(guī)則屏蔽掉。這就是所謂的CSS過濾器或技巧。webjx.com
  如果使用了錨點(diǎn),在應(yīng)用超鏈接樣式時(shí)要特別小心。
  如果您在代碼中使用了傳統(tǒng)的錨點(diǎn)(),您會注意到 :hover 和 :active偽類也會作用于它。要避免這種情形,你可以使用 id,或者使用鮮為人知的語法: :link:hover, :link:active
五、記住“LoVe/HAte”(愛/恨)鏈接規(guī)則
  要以下面的順序指定超鏈接偽類:Link, Visited, Hover, Acitve。任何其他順序都不妥當(dāng)。假如用了:focus,次序應(yīng)為 LVHFA(“Lord Vader‘s Handle Formerly Anakin”,Matt Haughey這樣建議)。
  請記住“TRouBLED”(麻煩的)邊框。
  邊框(border)、邊距(margin)和補(bǔ)白(padding)的簡寫次序?yàn)椋喉槙r(shí)針方向從上開始,即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上邊距為零,右邊距為1px,依此類推。
六、非零值要指明單位。
  在用CSS指定字體、邊距或大小時(shí),必須指明所用的單位。某些瀏覽器對未指明單位的處理方法不足為憑。零就是零,不管是 px還是em還是其他單位,它不需要單位。例如: padding: 0 2px 0 1em;
七、測試不同的字體大小。
  像Mozilla和Opera這樣的高級瀏覽器允許對字體進(jìn)行縮放,不管你用的是什么單位。某些用戶的默認(rèn)字體大小肯定和您的不同,盡最大努力去滿足他們。
  用嵌入式測試,發(fā)布時(shí)改為輸入。
  將樣式表嵌入在你的HTML源代碼中,在測試時(shí)可以消除許多緩存引起的錯(cuò)誤,尤其是某些Mac下的瀏覽器。但在發(fā)布前,一定要記住將樣式表移到外部文件,用 @import 或 引入。
八、加上明顯的邊框有利于布局調(diào)試。
  像 div {border: solid 1px #f00;} 之類的全局規(guī)則可以暫時(shí)為你查出布局問題。為特定的元素加上邊框可幫您找到難以發(fā)覺的交錯(cuò)或空白問題。
  對圖片路徑不要用單引號。
  當(dāng)設(shè)置背景圖片時(shí),要堅(jiān)持用雙引號。盡管看起來有些多余,但是如果不這么做,IE5/Mac會噎住。
  不要為將來的樣式表(比如手持式設(shè)備或打印用樣式表)留個(gè)“空位”。
  Mac IE5 對空的樣式表比較感冒,會增加頁面的裝入時(shí)間。建議樣式表中至少應(yīng)該有一條規(guī)則(哪怕是注釋也好),免得 MacIE噎住。
  另外值得一提的還有一些雖然不針對某些功能,但是在開發(fā)過程中應(yīng)當(dāng)注意的理論
九、好好組織您的CSS文件
  恰當(dāng)?shù)爻蓧K注釋CSS,將相似的CSS選擇符編為一組,養(yǎng)成一致的命名習(xí)慣和空白格式(為跨平臺考慮,建議用空白字符而不是tab。)以及適當(dāng)?shù)拇涡颉?br />   以功能(而不是外觀)為類和ID命名
  假如您創(chuàng)建了一個(gè) .smallblue 類,后來打算將文字改大,顏色變?yōu)榧t色,這個(gè)類名就不再有任何意義了。相反,您可以用更有描述性的名字如 .copyright 和 .pullquote。
十、組合選擇符
  保持CSS短小對減少下載時(shí)間非常重要。請盡量為選擇符分組、 利用繼承(inheritance)以及使用簡寫(shorthand)來減少冗余。
  使用圖片替換技術(shù)時(shí)要考慮親和力
  已經(jīng)發(fā)現(xiàn)傳統(tǒng)的FIR在屏幕閱讀器,以及關(guān)閉圖片顯示[的瀏覽器]中會出問題。 對此有其他解決辦法,要根據(jù)具體情況,慎重使用。

深達(dá)觀點(diǎn)
OUR VIEW