1

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

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

#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;
}
4

3 回答 3

1

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

background-position: 0 0;
background-position-x: 0;
background-position-y: 0;
于 2012-05-25T18:14:51.770 回答
0

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

于 2012-05-09T00:25:54.410 回答
0

首先 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 坐标。

于 2012-05-25T18:11:40.710 回答