伪元素的 CSS 动画在 Chrome 和 IE 中有效，但在没有 "position: absolute"的情况下在 Safari 和 Firefox 中是静止的

Question

使用这个 HTML:

<div class="icon-spinner"> test 1</div>
<div class="parent">
    <div class="icon-spinner nonchrome"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; test 2</div>
</div>

还有这个 CSS:

.icon-spinner:before{
    animation: spin 0.5s infinite linear;
    -webkit-animation: spin 0.5s infinite linear;
    content:"O";
    font-size: 30px;
}

.parent {
    position: relative;
}

.icon-spinner.nonchrome:before{
    position: absolute;
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

如 this jsfiddle 所示，“Test 1”旁边的大写“O”在 Chrome 39 和 IE 10/11 中正常旋转，但在 Safari 8 和 Firefox 34 中是固定的。“test 2”旁边的 O 在每个浏览器中都旋转，但它的旋转是在 Firefox 中偏离中心。

Safari 据说不支持在伪元素上使用 CSS 动画……但是为什么设置“position: absolute”会修复 Safari 中的“test 2”旋转？为什么 Firefox 中的“test 1”自旋被破坏了？应该是伪元素动画支持时间最长的。

由于“test 2”旋转在每个浏览器中都有效，我该如何在 Firefox 中修复它？在 OSX 上它很流畅，但偏离了中心。在 Windows 中，它的居中效果更好，但真的很紧张。

如您所见，我在“测试 2”html 中有几个不间断的空格，以使内容移开动画(在“测试 1”中自动完成)。如果可能，我怎样才能避免这种需要？

Answer 1

http://jsfiddle.net/3j5u8w77/54/

icon-spinner:before{
    animation: spin 0.5s infinite linear;
    -webkit-animation: spin 0.5s infinite linear;
    content:"O";
    font-size: 30px;
    height: 30px;
    display:inline-block;
}

.parent {
    position: relative;
}

@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

我想是部分解决方案。如果您在伪元素 safari 上使用 display: inline-block 可以在没有“position:absolute”的情况下为“O”设置动画效果。至于 firefox 中的偏心旋转，如果我明确地将高度设置为 30px 以确保 firefox 知道“O”到底有多大，那么旋转就是死点。但这改变了 safari 旋转“O”的方式，因此这让我相信由于浏览器呈现字体的方式，“O”在不同的浏览器中被视为不同的大小。也许明确地为此元素设置一个大小并设置一个精确的 transform-origin 属性以确保旋转始终居中