使用 :before 时 Safari 的 CSS 定位问题

Question

我在 Safari 中尝试定位 :before 内容时遇到问题。在 Chrome/IE 中，内容定位正确，但 Safari 对样式的解释不同（请参阅： http: //jsfiddle.net/danwoods/Yb8aR/）。我最初的想法是从 span:before 中删除position: absolute，但这提出了它自己的问题......

有什么地方看起来不合适吗？有什么解释可以解释为什么 Safari 的显示方式与 Chrome 不同吗？

谢谢，丹

Answer 1

我不确定您在删除绝对位置时遇到了什么问题，但我已将其更改为position: relative，用于top: 4px将其与文本对齐，并display: inline-block允许右边距将其与文本分开。

span:before {
    content: url(https://dl.dropboxusercontent.com/u/6114719/progress-2.png);
    display: inline-block;
    position: relative;
    top: 4px;
    margin-right: 5px;
    transition: all 1.5s ease-in-out;
    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
}

Fiddle 在这里： http: //jsfiddle.net/Yb8aR/5/ - 在 Chrome 和 Safari 中测试。

注意： Safari 似乎将 before 伪元素与 span 元素对齐，而 Chrome 似乎将其与 span 元素内的文本（居中）对齐。为什么会发生这种情况，我真的不确定。