| 導購 | 订阅 | 在线投稿
分享
 
 
 

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

來源:互聯網網民  2008-09-24 07:29:59  評論

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 方面的細節我們要更慎重的對待。

 
特别声明:以上内容(如有图片或视频亦包括在内)为网络用户发布,本站仅提供信息存储服务。
 
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 方面的細節我們要更慎重的對待。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有