3

Safari で :before コンテンツを配置しようとすると問題が発生します。Chrome/IE ではコンテンツは正しく配置されますが、Safari ではスタイルの解釈が異なります ( http://jsfiddle.net/danwoods/Yb8aR/を参照)。私の最初の考えはposition: absolute、span:before から を削除することでしたが、それには独自の問題があります...

何か場違いに見えますか？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 に答える