來源:互聯網網民 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 方面的細節我們要更慎重的對待。
订阅
