不同浏览器上动画 background-position-x 的问题

Question

我制作了一个简单的菜单，每个项目都是 300x100 像素。背景中有一个图像位于 -150 像素，当您将鼠标悬停在一个项目上时，它会变为 0（因此整个项目都有背景）。它在 Chrome 上运行良好，背景在 IE 上鼠标悬停一半，背景在 FF 上始终定位为 0。我该如何解决？ S

HTML：

<ul class="wrapper">
    <li id="webd"       class="box"><span class="title">web design</span></li>
    <li id="model"      class="box"><span class="title">3D modeling</span></li>
    <li id="digidraw"   class="box"><span class="title">digital drawing</span></li>
    <li id="other"      class="box"><span class="title">other</span></li>
</ul>

这是 CSS 示例：

.box {
    display: block;
    position: relative;
    width: 300px;
    height: 110px;
    background-color:black;
    z-index: 15;
    margin: 2px 2px 2px 2px;
    font-family: 'web_serveroffregular';
    color:white;
    font-size:x-large;
    transition: all .5s ease-in-out;
    background-position-x:-150px;
    background-repeat:no-repeat;
    text-align:right;
}

#webd {
    background-image:url(images/webd.png);
}

#webd:hover {
    background-position-x:0px;
}

您可以在http://klaunfizia.pl/damian/ 和http://klaunfizia.pl/damian/style.css 和http://klaunfizia.pl/damian/galeria.css 查看整个网站 如果你愿意。

@编辑

改变：

background-position-x:-150px;

到：

background-position: -150px 0px;

这在 FireFox 上运行良好，但在 IE 上仍然只运行到一半，background:fixed 和 backgroud-position:fixed 毁了每个浏览器。

Answer 1

background-position-x 是 invalid CSS。请改用background-position: -150px 0px。此外，background-attachment 属性必须设置为“固定”才能在 Firefox 和 Opera 中工作 (according to this page at W3Schools)