背景圖片定位的問題

真是沒有想到!竟然讓我發現了一個 IE9 優於 Google Chrome 的地方。
別再看到 IE 就認為微軟發展的瀏覽器是在阻止網頁設計師使用新技巧的東西了。
今天竟然是使用同樣的 CSS 設定,在 Google Chrome 看到的效果與 IE9 Firefox 14 都不一樣。而且根據該語法的解釋,是 Google Chrome 不支援這項於 CSS3 中增加設定法。

出問題的語法為 background-position ,其用途為定位背景圖片。

以前 CSS 2.1 的年代,background-position 後面接兩個參數,分別代表水平以及垂直的位址。
以該區塊的左上為基準點,下去計算其顯示的位址。

正常來說後面接受數值或是 left, center, right, top, bottom 這幾個關鍵字的使用。
數值可以使用負值來讓圖片移動到畫面外,當你只需要使用到其中的一部分。
不過這時候有一點小小尷尬的就是,都是以畫區塊的左上角為為基準點。
如果想要改以畫面的右上角為基準點,然後利用負責的方式移出外側的話,就做不到了。
因此在 CSS3 中定義了一種文字與數字一同使用的方法。利用文字的描述來改變其基準點,然後在使用數字來定位。

以下使用一張圓型的 WordPress LOGO 圖檔來做範例。

background-position:right top;
background-position:10px 10px;
background-position:right -20px top -20px;

這時候,問題就出現了。
以目前 Google Chrome 版本號 21.0.1180.83 為例,第三種語法失效。
而在 Firefox 版本號 14.0.1 與 IE 版本號 9.0.8112.16421 這兩個瀏覽器之中,都可以運作。

CSS3 規格說明 Positioning Images: the ‘background-position’ property
雖然目前 CSS3 的規格尚未完全的確立,還屬於規劃中的階段。
不過,讓我感到意外的是 IE 有實作出來的效果在 Google Chrome 中沒有實作。

以上,報告完畢。