錦囊妙計 CSS實現樣式布局7招

來源:互聯網
上載者:User

  在使用CSS建站時,您肯定遇到過形形色色的布局問題,最後可能被搞得焦頭爛額。本文的目的是讓您的設計過程更為容易,當您遇到困難時為您提供快速參考。
  1、有疑問,先驗證
  在調試時,先對您的代碼進行驗證往往能省去不少麻煩事。格式不正確的XHTML/CSS 會導致許多布局上的錯誤。在其他瀏覽器中進行測試之前,請先在最先進的瀏覽器中撰寫和測試CSS代碼,而不是相反。
  如果您在破舊的瀏覽器中編寫和測試,你的代碼就不得不依賴那個破舊瀏覽器的糟糕的顯示,然後在符合標準的瀏覽器中進行測試,看到顯示結果“不正常”時,你會很沮喪的。相反,您應該先將您的代碼完善,然後再設法為較低級的瀏覽器打算。這樣從一開始您的代碼就是符合標準的,你不必再為支援其他瀏覽器而勞心費神。當然了,目前遵從標準的瀏覽器無疑就是 Mozilla, Safari 或 Opera。
  2、確保您想要的效果真的存在
  許多特定的瀏覽器專有的CSS擴充在正式標準中並不存在。
 如果您對 filter(濾鏡) 或捲軸指定樣式,您用的就是私人代碼,除了IE之外,在別的瀏覽器中毫無作用。如果驗證器告訴您代碼沒有定義,極有可能您用了私人樣式,別指望在不同的瀏覽器中得到一致的效果。
  3、如果布局中一定要用浮動物件,別忘了適時使用清除(clear)屬性
  浮動元素似易實難,而且難以駕馭。如果您發現浮動物件伸出了容器的邊界,或者不像您所期望的那樣顯示,請檢查您的期望是否正確。關於這個問題請看Eric Meyer 的教程
  4、邊距的合并:可用padding 或 border 來避免
  您可能被多餘的(或者想要卻不出現的)空白搞得焦頭爛額。如果您用了 margins,邊距的合并可能就是問題的根源。
 Andy Budd 對此的解釋也許能為你解惑。
  5、避免將 padding/border 和固定寬度同時應用到同一元素
  IE5 錯誤的區塊模型是罪魁禍首,是它把事情弄得亂七八糟。雖然有補救方案,不過最好是繞過這個問題,當子項目的寬度固定時,為其父元素指定padding。
  6、避免IE下未指定樣式內容的閃爍
  如果您用 @import 來輸入外部樣式表,早晚會發現IE有“閃爍”的毛病。在應用CSS樣式之前,未格式化的HTML文本會短暫地出現。這是可以避免的.
  7、別指望 min-width 在IE中有用
  IE不支援它,但是它將 width 當作 min-width,所以通過一些 IE 的過濾技巧(filtering),可以實現同樣的最終效果。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.