今天有个界面调整的工作要做，美工设计了一个导航栏，其中的按钮是用了一张大图，然后用背景偏移来给每个按钮加上不同的图标，美工给切的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;}

使用的ＨＴＭＬ的片段：

<li>

 <div class="icon app1"></div>

 <div class="buttom-word">接件</div>

</li>

<li>

<div class="icon app2"></div>

<div class="buttom-word">在办箱</div>

</li>

<li>

<div class="icon app3"></div>

<div class="buttom-word">已办箱</div>

</li>

<li>

<div class="icon app4"></div>

<div class="buttom-word">传阅箱</div>

</li>

<li>

<div class="icon app5"></div>

<div class="buttom-word">收阅箱</div>

</li>

<li>

<div class="icon app6"></div>

<div class="buttom-word">督办箱</div>

</li>

在Chrome23，Firefox24， Opera12.16， Safari 5.1.7 下显示均正常， 在IE9 的IE7/8/9模式下除了app1显示正常外，其他显示的都是左上角的图标，但是使用IE9的兼容模式，然后将文本渲染设置为杂项后，显示效果就和其他浏览器一样了， 看了好一会，也没看出啥怪异的，于是翻了翻W3C的帮助：

（http://www.w3school.com.cn/cssref/pr_background-position.asp）

然后在看了代码，猛然发现不一样的地方， 美工导出的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 只要把文档模式调整为杂项的话（浏览器模式任意），显示就又正常了，

本文出自 “跬步，千里” 博客，请务必保留此出处http://weixq.blog.51cto.com/1576819/1386343

css background-position 偏移的问题,布布扣,bubuko.com

css background-position 偏移的问题