11

私は次のCSSコードを持っています

.editable:before {
    content: url(../images/icons/icon1.png);
    padding-right:5px;
}

これは、次のマークアップと組み合わせて使用​​されます。

<span class="editable"></span>

世界の他のすべての祝福されたブラウザに私のアイコンが表示されていますが、IE8にはこれに問題があるようです。:before疑似要素CSS2ではありませんか？content:CSS2コマンドでもありませんか？何が得られますか？

4

5 に答える 5

24

実際、ここでは注意して詳細を読む必要があります。詳細については、このリンクを参照してください-状態

Windows Internet Explorer 8、およびIE8標準モードのWindows Internet Explorerの新しいバージョンでは、この疑似要素の1コロン形式のみが認識されます（つまり、：before）。Windows Internet Explorer 9以降、:: before疑似要素には2つのコロンが必要ですが、1つのコロン形式は引き続き認識され、2つのコロン形式と同じように動作します。

ブラウザの意味<IE9-あなたは使用しなければなりません:beforeそして>=IE9-あなたは使用しなければなりません::before

于 2012-04-17T13:36:42.467 に答える
23

更新：ページを読み間違えました！IE 8は：beforeの画像をサポートしますが、IE7互換モードの場合はサポートしません。

IE8は、互換モードでない場合はコンテンツとしての画像をサポートしますが:before、サポートしません。テストのための@toschoへの称賛！

私がquirksmode.orgをどのように愛しているか。これにより、このようなものを少なくとも中途半端に扱うことができます。男はメダルに値する！

于 2010-03-30T15:05:52.983 に答える
10

：beforeと：afterを使用するときは、二重コロンを使用しないように注意してください（:: after-は機能しませんが、：afterは機能します）。私はこれのために約20分を失いました...

于 2012-10-15T12:26:17.600 に答える
6

生成されたコンテンツの背景として画像を使用できます。

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Generated content with an image</title>
<style>
p:before
    {
        content:    '';
        padding:    20px;
        background: url("css.png") center center no-repeat;
    }
</style>
<p>Test</p>

IE 8、Opera、Mozillaで動作します。ライブデモ。

于 2010-03-30T15:34:41.360 に答える
0

これはPekkaの素晴らしい例から外れています...私のプロジェクトでの私の高さは列の高さでした...それで私はpadding-bottomを追加しました：0px;

これに雨が降った場合に備えて....

.icon-spinner:before {
    content: '';
    padding: 15px;
    padding-bottom: 0px;
    background: url("css.png") no-repeat left top;
}
于 2013-09-30T15:51:04.980 に答える