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

Question

我在尝试定位 :before Safari 中的内容时遇到问题。在 Chrome/IE 中，内容定位正确，但 Safari 对样式的解释不同（参见：http: //jsfiddle.net/danwoods/Yb8aR/）。我最初的想法是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;
}

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

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