3

我在尝试定位 :before Safari 中的内容时遇到问题。在 Chrome/IE 中,内容定位正确,但 Safari 对样式的解释不同(参见:http: //jsfiddle.net/danwoods/Yb8aR/)。我最初的想法是position: absolute从跨度中删除:之前,但这提出了它自己的问题......

有什么看起来不合时宜的吗?关于为什么 Safari 显示的内容与 Chrome 不同的任何解释?

谢谢,丹

4

1 回答 1

4

我不确定您在删除绝对位置时遇到了什么问题,但我已将其更改为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 元素内的文本对齐(居中)。为什么会这样,我真的不确定。

于 2013-10-25T00:18:42.153 回答