css background-position 偏移的问题
2014-03-29 03:00
405 查看
今天有个界面调整的工作要做,美工设计了一个导航栏,其中的按钮是用了一张大图,然后用背景偏移来给每个按钮加上不同的图标,美工给切的CSS在 Chrome下显示的很正常,但是IE9下除了第一个显示正常外,其他都是显示的左上角的图标,
![](http://img.baidu.com/hi/jx2/j_0016.gif)
我们来看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;}
使用的HTML的片段:
<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://img.baidu.com/hi/jx2/j_0021.gif)
本文出自 “跬步,千里” 博客,请务必保留此出处http://weixq.blog.51cto.com/1576819/1386343
![](http://img.baidu.com/hi/jx2/j_0016.gif)
我们来看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;}
使用的HTML的片段:
<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)
浏览器支持
所有浏览器都支持 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 值。 |
再次测试了如下代码:
.i2 { background-position: -30px -120; }
.i3 { background-position: -60 -120; }
在Chrome23,FireFo24, Opra 12.16,IE9 的7,8,9的标准、兼容模式下,显示的都是左上角的图标, 但是IE9 只要把文档模式调整为杂项的话(浏览器模式任意),显示就又正常了,
![](http://img.baidu.com/hi/jx2/j_0021.gif)
本文出自 “跬步,千里” 博客,请务必保留此出处http://weixq.blog.51cto.com/1576819/1386343
相关文章推荐
- IE6/IE7下position:absolute;绝对定位偏移、不显示问题
- css中定位position、偏移top,bottom,left,right和高宽度设置问题
- IE7-position:relative层在动态渲染时的偏移问题
- IE6/IE7下position:absolute;绝对定位偏移、不显示问题
- IE6和IE7下绝对定位position:absolute和margin的冲突问题解决
- IE7下position:relative的问题
- 解决IE6浏览器下position:fixed固定定位问题
- 修复吾爱OD数据窗口双击不出现偏移问题
- Masonry和UIView+position冲突的问题
- 自定义系统NavigationBar时,UIScrollView内容发生偏移的问题
- 【css】ie6 和 ie7 下 position 与 overflow 的问题
- 解决android position fixed无效问题
- UITextField使用时文字向下偏移问题
- 五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题
- IE6/IE7/IE8兼容问题|overflow,display,position的区别|块元素与内联元素的区别
- iOS11导航栏自定义按钮偏移问题
- asp.net 2005 调用js日历控件的位置偏移问题
- 完美解决IE6下position:fixed的Bug;以及闪动问题
- 新手常见问题(一)————position
- 页面内容多,加载时间长的时候,锚点位置偏移问题