CSS做網站時遇到問題的參考技巧
發布時間:2022-03-10 點擊:322
在使用css建站時,您肯定遇到過形形色色的布局問題,最后可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易,當您遇到困難時為您提供快速參考。
有疑問,先驗證
在調試時,先對您的代碼進行驗證往往能省去不少麻煩事。格式不正確的xhtml/css 會導致許多布局上的錯誤。
在其他瀏覽器中進行測試之前,請先在最先進的瀏覽器中撰寫和測試css代碼,而不是相反。
如果您在破舊的瀏覽器中編寫和測試,你的代碼就不得不依賴那個破舊瀏覽器的糟糕的顯示,然后在符合標準的瀏覽器中進行測試,看到顯示結果“不正常”時,你會很沮喪的。相反,您應該先將您的代碼完善,然后再設法為較低級的瀏覽器打算。這樣從一開始您的代碼就是符合標準的,你不必再為支持其他瀏覽器而勞心費神。當然了,目前遵從標準的瀏覽器無疑就是 mozilla, safari 或 opera。
確保您期望的效果確實存在
許多特定的瀏覽器專有的css擴展在正式標準中并不存在。 如果您對 filter(濾鏡) 或滾動條指定了樣式,那么您就用了私有代碼,除了ie之外,在別的瀏覽器中毫無作用。如果驗證器告訴您代碼沒有定義,極有可能您用了私有樣式,這樣在不同的瀏覽器中很難達到一致的效果。
如果布局中一定要用浮動對象,別忘了適時使用清除(clear)屬性。
浮動對象似易實難,而且不總是令人如愿以償。如果您發現浮動對象伸出了容器的邊界,或者不像您所期望的那樣顯示,請檢查您的期望是否正確。關于這個問題請看eric meyer的教程
邊距的合并:可用padding 或 border 來避免。
您可能被多余的(或者想要卻不出現的)空白搞得焦頭爛額。如果您用了 margins,邊距的合并可能就是問題的根源。 andy budd 對此的解釋可能為你解惑。
避免將 padding/border 和固定寬度同時應用到同一元素。
ie5 的區塊模型是錯誤的,是它把事情辦壞了。對此也有權宜之計,不過最好是繞過這個問題,當子元素的寬度固定時,為父元素指定padding。
避免ie下未指定樣式內容的閃爍。
如果您僅僅靠 @import 來輸入外部樣式表,早晚您會發現ie有“閃爍”的毛病。在應用css樣式之前,未經格式化的html文本會短暫地出現。這是可以避免的。
別指望 min-width 在ie中有用。
ie不支持它,但是它將 width 當作 min-width,所以通過一些 ie 的過濾技巧(filtering),可以實現同樣的最終效果。
把css過濾器(filters)當作最后的手段
css 技巧和過濾器可以使您有選擇地應用到(或者不應用到)某些元素。應當盡可能地找到標準的跨瀏覽器的解決辦法來實現您想要的效果,而不是動不動就使用過濾器。要將它當成走投無路時的救命手段。在這里可以找到大量的css 過濾技巧。[譯注:不要把這里的filters和ie中的濾鏡混淆。由于各個瀏覽器對css標準的支持程度不一,人們找到了許多技巧,將瀏覽器無法解釋或錯誤解釋的樣式表或規則屏蔽掉。這就是所謂的css過濾器或技巧。webjx.com
如果使用了錨點,在應用超鏈接樣式時要特別小心。
如果您在代碼中使用了傳統的錨點,您會注意到 :hover 和 :active偽類也會作用于它。要避免這種情形,你可以使用 id,或者使用鮮為人知的語法: :link:hover, :link:active