Question

我最近为动画加载图标添加了一些CSS3支持，以便在不同的浏览器（如果不是全部）上工作。
Chrome是第一个，没有问题。

但是当我在Firefox和Internet Explorer中尝试它时，滚动条会保持＆＃34;弹跳＆＃34;在滚动条总高度的一个小区域内。

它看起来像一只多动的狗上下跳动，但动画完全有效。这是我为IE / FF / ...支持添加的代码，它使动画工作并且滚动条反弹：

i {
    /* Add vendor prefixes for other browsers */
    animation: rotateThis .75s infinite linear;

    font-size: 15pt;
    text-align: center;
    width: 100%;
    margin: 20px 0;
}
/* Add vendor prefixes for other browsers */
@keyframes rotateThis {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

上面的代码使Bootstrap加载图标连续旋转，这就是它 这是一个小提琴，对于任何感兴趣的人：JSFiddle （我建议在谷歌浏览器中查看它，以避免对所需结果的任何误解）

关于为什么会发生这种情况以及如何修复它的任何想法？我很困惑。

Answer 1

您需要为图标设置宽度和高度

更新了DEMO

CSS

.icon {
 width: 20px;
 height: 20px;
}
.outer {
    text-align: center
}

HTML

  <div class="outer "><i class="icon  glyphicon glyphicon-refresh"></i></div>

在IE和Firefox中弹跳滚动条

1 个答案: