web-dev-qa-db-ja.com

IE8にCSS：beforeタグを受け入れさせるにはどうすればよいですか？

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

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

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

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

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

cssinternet-explorer-8pseudo-elementcss-content
11
William Calleja

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

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

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

23
Pekka

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

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

ブラウザの意味<IE9-:beforeを使用する必要があり、>=IE9の場合-::beforeを使用する必要があります

24
Tim

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

10
marinbgd

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

<!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。 ライブデモ 。

6
fuxia

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

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

.icon-spinner:before {
    content: '';
    padding: 15px;
    padding-bottom: 0px;
    background: url("css.png") no-repeat left top;
}
0
no1uknow