正所謂“冤家路窄”,在使用css網頁設計必然涉及到css佈局的問題,許多設計師因此忙的焦頭爛額,為了讓你的設計變得更容易,本人在這裡提幾點技巧性建議,希望能夠幫助到大家。


1、如果佈局中一定要用浮動對象,別忘了適時使用清除(clear)屬性


浮動元素似易實難,而且難以駕馭。如果您發現浮動對象伸出了容器的邊界,或者不像您所期望的那樣顯示,請檢查您的期望是否正確。關於這個問題請看Eric Meyer 的教程


2、邊距的合併:可用padding 或border 來避免


您可能被多餘的(或者想要卻不出現的)空白搞得焦頭爛額。如果您用了margins,邊距的合併可能就是問題的根源。 Andy Budd 對此的解釋也許能為你解惑。


3、避免將padding/border 和固定寬度同時應用到同一元素


IE5 錯誤的區塊模型是罪魁禍首,是它把事情弄得亂七八糟。雖然有補救方案,不過最好是繞過這個問題,當子元素的寬度固定時,為其父元素指定padding。


4、避免IE下未指定樣式內容的閃爍


如果您用@import 來輸入外部樣式表,早晚會發現IE有“閃爍”的毛病。在應用CSS樣式之前,未格式化的HTML文本會短暫地出現。這是可以避免的.


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


IE不支持它,但是它將width 當作min-width,所以通過一些IE 的過濾技巧(filtering),可以實現同樣的最終效果。


6、IE 中顯示不正常


可能是Peekaboo 臭蟲在作怪,尤其是當鼠標經過超鏈接時能顯示正常。修補方法見Position is Everything。


7、如果使用了錨點,在應用超鏈接樣式時要特別小心


如果您在代碼中使用了傳統的錨點(),您會注意到:hover 和:active偽類也會作用於它。要避免這種情形,你可以使用id,或者使用鮮為人知的語法: :link:hover, :link:active


8、記住“LoVe/HAte”(愛/恨)鏈接規則


要以下面的順序指定超鏈接偽類:Link, Visited, Hover, Acitve。任何其他順序都不妥當。假如用了:focus,次序應為LVHFA(“Lord Vader's Handle Formerly Anakin”,Matt Haughey這樣建議)。


9、請記住“TRouBLED”(麻煩的)邊框


邊框(border)、邊距(margin)和補白(padding)的簡寫次序為:順時針方向從上開始,即Top, Right, Bottom, Left。比如margin: 0 1px 3px 5px;表示上邊距為零,右邊距為1px,依此類推。


10、測試不同的字體大小


像Mozilla 和Opera 這樣的高級瀏覽器都允許你改變字體大小,不管你用什麼字體單位。某些用戶的默認字體大小肯定和你的不同,盡最大努力去滿足他們。


11、測試時用嵌入式樣式,發佈時再改為外部輸入


將樣式表嵌入在你的HTML 源代碼中,在測試時可以消除許多緩存引起的錯誤,尤其是某些Mac 下的瀏覽器。但在發布前,一定要記住將樣式表移到外部文件,用@import 或引入。


12、加上明顯的邊框有助於佈局調試


像div {border: solid 1px #f00;} 之類的全局規則可以暫時為你查出佈局問題。為特定的元素加上邊框可幫您找到難以發覺的重疊或空白問題。


13、不要為將來的樣式表(比如手持式設備或打印用樣式表)“佔位子”


Mac IE5 對空的樣式表比較感冒,會增加頁面的裝入時間。建議樣式表中至少應該有一條規則(哪怕是註釋也好),免得MacIE噎住。

 

 

創作者介紹

唯獨╮的部落格

唯獨╮ 發表在 痞客邦 PIXNET 留言(0) 人氣()