css+图标偏移,css background-position 偏移的问题

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

CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
css加号图标_一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
CSS笔记（十）position属性与定位
参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position属性规定了元素的定位类型.任何元素都可定位,其中,绝对或固定元素会 ...
html三角形图标,纯css三角形和css三角箭头实例代码
css箭头实例demo 纯css三角形和css三角箭头,可以随意放大缩小,可以随意颜色,这要比图片实现的三角箭头或者三角形状要灵活的多. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不 ...
CSS 系列七高级技巧篇精灵图、字体图标、CSS三角、图片和文字对齐以及bug 、溢出文字省略号、CSS 初始化、常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
css左边定位,CSS Position(定位) | 菜鸟教程
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定po ...
html 右上角删除图标,html+css制作div标签增加右上角删除图标的示例代码_CSS
一.需求描述在Div标签的右上角显示删除图标二.实现方式 html.CSS 三.参考代码 .container{ width:60px; height:60px; border: 1px dott ...
【web前端】CSS高级技巧（精灵图，字体图标，CSS三角，CSS用户界面样式，文字与图片垂直对齐，溢出的文字省略号显示，常见布局技巧，CSS初始化）
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
13 【精灵图图标字体 CSS三角鼠标样式溢出省略号】
20.精灵图 20.1为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...

css+图标偏移,css background-position 偏移的问题

css+图标偏移,css background-position 偏移的问题相关推荐

最新文章

热门文章