html - 不同浏览器上动画 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/ 查看整个网站CSS 位于 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 属性必须设置为“fixed”才能在 Firefox 和 Opera 中工作 (according to this page at W3Schools)