今天有個界面調整的工作要做，美工設計了一個導航欄，其中的按鈕是用了一張大圖，然后用背景偏移來給每個按鈕加上不同的圖標，美工給切的CSS在 Chrome下顯示的很正常，但是IE9下除了第一個顯示正常外，其他都是顯示的左上角的圖標，我們來看css：

.icon{background:url(imgs/homepage-icon.png)}

.app1{background-position:0 -120px;}

.app2{background-position:-30 -120px;}

.app3{background-position:-60 -120px;}

.app4{background-position:-90 -120px;}

.app5{background-position:-120 -120px;}

.app6{background-position:-150 -120px;}

.app7{background-position:-180 -120px;}

使用的ＨＴＭＬ的片段：

接件在辦箱已辦箱傳閱箱收閱箱督辦箱

在Chrome23，Firefox24， Opera12.16， Safari 5.1.7 下顯示均正常， 在IE9 的IE7/8/9模式下除了app1顯示正常外，其他顯示的都是左上角的圖標，但是使用IE9的兼容模式，然后將文本渲染設置為雜項后，顯示效果就和其他瀏覽器一樣了， 看了好一會，也沒看出啥怪異的，于是翻了翻W3C的幫助：

(http://www.w3school.com.cn/c***ef/pr_background-position.asp)

瀏覽器支持

所有瀏覽器都支持 background-position 屬性。

可能的值

值描述

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right如果您僅規定了一個關鍵詞，那么第二個值將是"center"。

默認值：0% 0%。

x% y%第一個值是水平位置，第二個值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您僅規定了一個值，另一個值將是 50%。

xpos ypos第一個值是水平位置，第二個值是垂直位置。

左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。

如果您僅規定了一個值，另一個值將是50%。

您可以混合使用 % 和 position 值。

然后在看了代碼，猛然發現不一樣的地方， 美工導出的CSS中background-position屬性的第一個值后面沒有px！， 全部加上了px后， IE9不管設置為7/8/9，還是兼容模式，都顯示正常了。

再次測試了如下代碼：

.i2 { background-position: -30px -120; }

.i3 { background-position: -60 -120; }

在Chrome23，FireFo24， Opra 12.16，IE9 的7，8，9的標準、兼容模式下，顯示的都是左上角的圖標， 但是IE9 只要把文檔模式調整為雜項的話(瀏覽器模式任意)，顯示就又正常了，

總結

以上是生活随笔為你收集整理的css+图标偏移,css background-position 偏移的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。