firefox背景位置百分比不起作用

Question

我将一组图像合并为一个大图像以保存HTTP请求，并使用百分比background-position来调整要使用的图像。使用百分比而不是像素，因为图像的宽度由父元素控制。

合并的图像如下：

关于渲染结果，请参考http://zhujianer.com/中的前五个图像。

在Chrome上运行正常。 从Console，我们可以看到CSS选择器。

但它意外地在Firefox中使用相同的图像。 （在Mac上的FF 17.0.1上测试过） 从Firebug中，选择器就在那里，但属性background-position-x: -200%;已经消失。即使我添加它，FF也会自动删除它。所以看来这对FF来说是非法的。

完整的CSS代码（使用SCSS）：

.process {
    width: 120px;
    height: 120px;
    max-width: 100%;
    border-radius: 60px;
    margin: 0 auto;

    .image-block {
        width: 90%;
        height: 90%;
        background-size: 500%;
        margin: 0 auto;
        position: relative;
        top: 5%;
        background-image: url('../img/process.png');

        &:hover {
            background-position-y: 100%;
        };
    }

    &#process-idea .image-block {
        background-position-x: 0;
    }

    &#process-design .image-block {
        background-position-x: -100%;
    }

    &#process-code .image-block {
        background-position-x: -200%;
    }

    &#process-launch .image-block {
        background-position-x: -300%;
    }

    &#process-monitor .image-block {
        background-position-x: -400%;
    }
}

Answer 1

FF不知道background-position-x，他只知道背景位置。所以你可以这样写：

#process-section #process-idea.process .image-block {
    background-position: -200% 0;
}