Question

我在使用chrome加载图像时遇到问题，它在safari和firefox中看起来很好，但是在chrome中我得到两个半加载图像而不是一个整个图像的视图。我不知道如何解决这个问题，任何帮助表示赞赏。

HTML：

<div class="execute-actions">
    <div class="loading"></div>
</div>

CSS：

 .loading {
    position: relative;
    background: url("../../assets/img/core/loading.gif");
    background-position: 912px 0px;
    width: 48px;
    height: 48px;
}

引用加载动画的JS的一部分：

    $(window).ready(function () {
    if ($("html[data-useragent*='MSIE 8']").length) {
        if ($("div.loading")) {
            setInterval(function () {
                $("div.loading").css({"background-position-x": "-=48px" });
            }, 35);
        }
    } else {
        if ($("div.loading")) {
            setInterval(function () {
                $("div.loading").css({"background-position": "-=48px" });
            }, 35);
        }
    }

Answer 1

在动画运行时检查.loading div上的CSS样式。您可能会看到x轴和y轴都被覆盖。没有小提琴就不能说更多，但铬可能会将背景位置y设置为50％。所以你可能也应该使用＆＃39; background-position-x＆＃39;也在铬：）

Chrome显示加载gif的方式与Safari和Firefox不同

1 个答案: