CSS 針對 Safari(WebKit)的 CSS 注意事項

Google Chrome 的發布,使我們更加的注重基于 WebKit 核心的浏覽器的表現情況,但我們很多時候“不小心”就會出現問題。考慮下面極端的情況

.box {

background: red;

#

background: yellow;

background: #green;

}經過測試發現,Exploer 系列浏覽器會顯示黃色(yellow),Firefox 與 Opera 則會顯示紅色(red),而 Safari 以及 Chrome 則會顯示綠色(green)。

按照本人的理解,這是各浏覽器 CSS 解釋上的差異造成的。首先,Safari 會對于 #red 這樣的“常量顔色值”會嘗試解析,而其他浏覽器則取“#”後面的 16 進制色值。

然後對于

.box {

#

background: yellow;

}的理解,Exploer 系列會直接解析成 background: yellow; 而其他浏覽器則等待“;”然後連接起來,所以不起作用。類似的可以使用

.box {

.

background: yellow;

}測試下。但如果語句後面加上分號“;”

.box {

#; /* 或者 .; */

background: yellow;

}則會恢複正常。可以參考這裏,獲得更進步的詳細信息。

總結下的結論,首先,比如你想針對 Exploer 僅 Hack 一條語句,那麽可以在其上行簡單加個“.”或者“#”,這僅適合臨時調試使用。

其次,期前如果不小心寫成 #red 這樣的色值,可能會無關要緊。但就目前衆多的浏覽器情況而言,可能就會有上述意想不到的結果,所以 CSS 方面的細節我們要更慎重的對待。

Dreamweaver使用CSS的注意事項
  很多CSSer是從以前的網頁制作中開始學習CSS網頁布局的,或許還存在著一定的DW習慣。希望此文能幫助大家理解和糾正一些不好的習慣。  由于“可視化”和操作簡便,在DW中編寫CSS的朋友很多,今天我們介紹一些在D...查看完整版>>Dreamweaver使用CSS的注意事項
 
CSS Hack兼容大全,令您的網頁能正常顯示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari…
CSS Hack兼容大全,令您的網頁能正常顯示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari…
首先附上的時阿捷站上的CSSHack圖CSS對浏覽器器的兼容性具有很高的價值,通常情況下IE和Firefox存在很大的解析差異,這裏介紹一下兼容要點。常見兼容問題:1.DOCTYPE 影響 CSS 處理2.FF: div 設置 margin-left, marg...查看完整版>>CSS Hack兼容大全,令您的網頁能正常顯示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari…
 
針對各種版本的浏覽器隱藏CSS的九大技巧
  我們都知道浏覽器之間是有差異的,很多人在使用XHTML+CSS方式制作網頁的時候都曾爲此無比頭痛。要在這些差異的影響下工作需要很多的技巧,“隱藏CSS”就是其中很重要的一種技巧(甚至是最重要的)。這種技巧的主...查看完整版>>針對各種版本的浏覽器隱藏CSS的九大技巧
 
針對浏覽器隱藏CSS之獨孤九劍
  我們都知道浏覽器之間是有差異的,很多人在使用XHTML+CSS方式制作網頁的時候都曾爲此無比頭痛。要在這些差異的影響下工作需要很多的技巧,“隱藏CSS”就是其中很重要的一種技巧(甚至是最重要的)。這種技巧的主...查看完整版>>針對浏覽器隱藏CSS之獨孤九劍
 
針對浏覽器隱藏CSS之九大技巧
  我們都知道浏覽器之間是有差異的,很多人在使用XHTML+CSS方式制作網頁的時候都曾爲此無比頭痛。要在這些差異的影響下工作需要很多的技巧,“隱藏CSS”就是其中很重要的一種技巧(甚至是最重要的)。這種技巧的主...查看完整版>>針對浏覽器隱藏CSS之九大技巧
 
一個針對IE7的CSS Hack
IE7 修複了很多 bug,也增加了對一些選擇符的支持,所以現在諸如 *html {} 和 html>body {} 等針對 IE 隱藏或顯示的 hack 都會在 IE7 中失效。雖然 CSS Hack 不推薦使用,條件注釋才是萬無一失的過濾器,但是條件...查看完整版>>一個針對IE7的CSS Hack
 
針對浏覽器隱藏CSS之獨孤九劍
  我們都知道浏覽器之間是有差異的,很多人在使用XHTML+CSS方式制作網頁的時候都曾爲此無比頭痛。要在這些差異的影響下工作需要很多的技巧,“隱藏CSS”就是其中很重要的一種技巧(甚至是最重要的)。這種技巧的主...查看完整版>>針對浏覽器隱藏CSS之獨孤九劍
 
針對浏覽器隱藏CSS之九大技巧
  我們都知道浏覽器之間是有差異的,很多人在使用XHTML+CSS方式制作網頁的時候都曾爲此無比頭痛。要在這些差異的影響下工作需要很多的技巧,“隱藏CSS”就是其中很重要的一種技巧(甚至是最重要的)。這種技巧的主...查看完整版>>針對浏覽器隱藏CSS之九大技巧
 
css3陰影屬性box-shadow注意事項-css設計
css3陰影屬性box-shadow的一些注意點:box-shadow:陰影水平偏移值(可取正負值); 陰影垂直偏移值(可取正負值);陰影模糊值;陰影顔色; Firefox支持Box Shadow(陰影):-moz-box-shadow:2px 2px 5px #333333; web...查看完整版>>css3陰影屬性box-shadow注意事項-css設計
 
 
回到王朝網路移動版首頁