我在尝试定位 :before Safari 中的内容时遇到问题。在 Chrome/IE 中,内容定位正确,但 Safari 对样式的解释不同(参见:http: //jsfiddle.net/danwoods/Yb8aR/)。我最初的想法是position: absolute
从跨度中删除:之前,但这提出了它自己的问题......
有什么看起来不合时宜的吗?关于为什么 Safari 显示的内容与 Chrome 不同的任何解释?
谢谢,丹
我在尝试定位 :before Safari 中的内容时遇到问题。在 Chrome/IE 中,内容定位正确,但 Safari 对样式的解释不同(参见:http: //jsfiddle.net/danwoods/Yb8aR/)。我最初的想法是position: absolute
从跨度中删除:之前,但这提出了它自己的问题......
有什么看起来不合时宜的吗?关于为什么 Safari 显示的内容与 Chrome 不同的任何解释?
谢谢,丹
我不确定您在删除绝对位置时遇到了什么问题,但我已将其更改为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 元素内的文本对齐(居中)。为什么会这样,我真的不确定。