在IE和Firefox中弹跳滚动条

我最近为动画加载图标添加了一些CSS3支持，以适用于不同的浏览器（如果不是全部）。
铬是第一个，没有问题。在IE和Firefox中弹跳滚动条

但是，当我在Firefox和Internet Explorer中尝试它时，滚动条会在滚动条总高度的一个小区域内“反弹”。

它看起来像一只活动过度的狗，上下跳动，但动画完全起作用。下面是我添加了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); 
    } 
}

上面的代码做一个引导加载图标连续旋转，仅此而已。
这里有一个小提琴，有兴趣的人士：JSFiddle（我建议谷歌浏览器观看，以避免所期望的结果的任何误解）

为什么发生这种情况和如何将它固定任何想法？我很困惑。

来源

2014-07-16 Pieter VDE

检查大纲图标

; http://jsfiddle.net/XhNky/1/ 你应该尝试使用图标的固定高度/宽度。如果它可以工作，你可以回答你自己的问题;） –

@RenéGeuze所以通过在页面中添加“高度”每旋转一次，它会使滚动条看起来像弹跳？好的，我应该可以解决这个问题。感谢您的指示！ –

您需要设置宽度和高度更新DEMO

CSS

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

HTML

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

来源

2014-07-16 07:29:23 Tushar

完美！奇迹般有效。我打算自己回答这个问题，但你打败了我:) –

在IE和Firefox中弹跳滚动条

回答

相关问题