Question

我在精灵上使用背景位置来导航图像。它看起来很棒的chrome，safari，ff等。水平属性似乎在IE中工作但不是垂直。它到处都是。相反，我在不同的网站上拥有几乎完全相同的代码，但水平设置了that精灵。

这是css。我添加了background-position-x / y作为潜在修复，但IE似乎也没有受到影响（除非Winebottler IE7安装有缓存错误）。我是新手，所以我会解释任何noob的东西：

#menu-item-16 a {
background-image: url("images/csg.png");
background-position: 0 -510px;   
background-position-x: 0;
background-position-y: -510px;
background-repeat: no-repeat;
background-size: 400px auto;
display: block;
height: 80px;
margin-left: 0;
margin-top: -13px;
outline: none;
padding: 0;
text-indent: -9999px;
width: 400px;
}
#menu-item-16 a:hover {
    background-position: 0 -638px;
    background-position-x: 0;
    background-position-y: -638px;
}
#menu-item-24 a {
    background-image: url("images/csg.png");
    background-position: 0 0;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: no-repeat;
    background-size: 400px auto;
    display: block;
    height: 80px;
    margin-left: 0;
    margin-top: -10px;
    outline: none;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}
#menu-item-24 a:hover {
    background-position: 0 -128px;
    background-position-x: 0;
    background-position-y: -128px;
}
#menu-item-15 a {
    background-image: url("images/csg.png");
    background-position: 0 -1025px;
    background-position-x: 0;
    background-position-y: -1025px;
    background-repeat: no-repeat;
    background-size: 400px auto;
    display: block;
    height: 80px;
    margin-left: 0;
    margin-top: -13px;
    outline: none;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}
#menu-item-15 a:hover {
    background-position: 0 -1153px;
    background-position-x: 0;
    background-position-y: -1153px;
}
#menu-item-13 a {
    background-image: url("images/csg.png");
    background-position: 0 -1282px;
    background-position-x: 0;
    background-position-y: -1282px;
    background-repeat: no-repeat;
    background-size: 400px auto;
    display: block;
    height: 80px;
    margin-left: 0;
    margin-top: -13px;
    outline: none;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}
#menu-item-13 a:hover {
    background-position: 0 -1409px;
    background-position-x: 0;
    background-position-y: -1409px;
}
#menu-item-14 a {
    background-image: url("images/csg.png");
    background-position: 0 -769px;
    background-position-x: 0;
    background-position-y: -769px;
    background-repeat: no-repeat;
    background-size: 400px auto;
    display: block;
    height: 80px;
    margin-left: 0;
    margin-top: -13px;
    outline: none;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}
#menu-item-14 a:hover {
    background-position: 0 -897px;
    background-position-x: 0;
    background-position-y: -897px;
}
#menu-item-28 a {
    background-image: url("images/csg.png");
    background-position: 0 -257px;
    background-position-x: 0;
    background-position-y: -257px;
    background-repeat: no-repeat;
    background-size: 400px auto;
    display: block;
    height: 80px;
    margin-left: 0;
    margin-top: -13px;
    outline: none;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
}
#menu-item-28 a:hover {
    background-position: 0 -385px;
    background-position-x: 0;
    background-position-y: -385px;
}

Answer 1

顺便说一句，上面的代码不能正常工作，因为css代码会查看最后一个没有中断的条目。

background-position: 0 0;
background-position-x: 0;
background-position-y: 0;

Answer 2

我必须添加一个alt样式表，调整IE的背景位置。奇怪的是，我最初使用this精灵生成器来节省时间。它在自己的css上吐出的坐标对于FF，Chrome等都是偏远的。但是它们在IE上是有用的 - 比较它们。

Answer 3

首先，background-position-x和background-position-y在Firefox中不起作用。对于跨浏览器，它的工作原理如下：

background-position-x: 300px;
background-position: 300px 0;
background-position-y: 300px;
background-position: 0 300px;

IE和Chrome支持background-position-x和background-position-y，但是，当您尝试更改事件的background-position-y时，IE无法正常工作。您可以尝试使用上面的代码来替换使用x和y坐标的显式定位。

IE7垂直背景位置错误

3 个答案: