問題タブ [css-content]

以下が機能しないのはなぜですか。

HTML:

CSS:

この方法でコンテンツを追加することはできませんか? 何度か悩んでいますが、選び方が間違っていませんか？

ここで :before CSS を使用して画像/アイコンを取得します (下の画像の丸い円を参照) が、Internet Explorer 8 以降では表示されません。

これはサイトです: http://www.websiteprofessioneel.nl

以下の画像リンクは、このスクリーンダンプ http://tinypic.com/view.php?pic=xxd9f&s=5#.Ul_WajZRoWYで丸で囲まれた正しい要素 (最初の投稿ヘッダーのアイコン) を示しています

これはそのための CSS です。

おそらく何か不足していますか？他のすべてのブラウザーは正常に動作し、私が知る限り、peudo CSS は少なくとも IE9 で完全にサポートされていますが、IE8、9 以降では動作しません。

IE ブラウザー用の印刷 CSS を作成しています。その中で、CSS を使用して div にテキストと画像を追加する必要があります。contentテキストの追加と画像の追加に使用していますbackgroundが、どういうわけか画像が表示されません。

これが私のやり方です。

これは正しい方法ですか？私はどこかで間違っていますか？

ありがとう。

私の段落の高さ/行の高さは 50px でtext-align: center、テキストを中央に配置します。しかし、 p:before は高さ/行の高さを増加させ、テキストを突き出します。p と p:before の両方を垂直方向に中央揃えにしたい。

http://jsfiddle.net/MMAUy/

position: absoluteテキストの長さはさまざまなので、アイコンだけに使用できるとは思いません...

すべての画像が背景画像として設定されているページで検索エンジンに問題が発生するかどうか、および各画像の下の「キャプション」(つまり、CSS コンテンツ タグ) を正しく検索してインデックス化するかどうか疑問に思っています。検索エンジンが背景画像を見つけるかどうかはあまり気にしませんが、キャプションをインデックスに登録してもらいたいです。

番号付きリストが欲しかったので、css で使用できるこのクールなカウンターを見つけて、ブラウザーに数値を計算させました。

作成中の html には命令セットのページが含まれており、各セットには 1、2、3 などの番号が付けられています。一度に表示できるセットは 1 つだけです。ヘッダーをクリックすると、そのセットが表示され、他のセットは非表示になります。

それはごちそうのように機能し、誰かが Internet Explorer 8 でテストすることを考えるまで、私たちは笑顔でそこに座っていました。クリックしてセットを表示すると、すべての数字がゼロ (0) でした。

私はグーグルで検索してこのページを見つけました-問題をかなりよく説明しています（非表示のコンテンツで使用される:hoverとcssカウンターロジックの使用の組み合わせです）が、満足のいくものではない解決策を提供します-維持できるのが大好きですcssカウンターを使用して、何らかの形でページの数値を更新するie8固有のハックを実装するだけです。この問題についてインターネットで他の情報を見つけるのに苦労しています。

私の特定のページでは、番号付きリストを含む div にマウス ポインターを移動するまでゼロが記述されます。その時点で、数字は魔法のように修正されます。マウスが要素の上に置かれているとページを「微調整」することができるものはありますか? または、より適切な解決策はありますか？

Webkit ブラウザーで Javascript を介して疑似要素の生成されたコンテンツを取得する際に問題があります。

気にする人のためのコンテキスト: 私は jQuery モバイル アプリに取り組んでおり、FontAwesome アイコンを使用しようとしています。jQM が独自の組み込みアイコン セットに使用するのと同じ data-icon プロパティを使用してそれらを追加できることを望んでいました。そのため、このクラスでページを検索し、FontAwesomeui-icon-whateverに対応するクラスを追加するスクリプトを作成しました。icon-whatever問題は、FontAwesome がアイコンに疑似コンテンツを使用しているのに対し、jQM は古き良き背景画像スプライトを使用していることです。したがって、アイコン名に重複がある場合 (たとえば、両方のセットに「編集」という名前のアイコンがある場合)、一方のアイコンがもう一方の上に重ねられてしまいます。ご想像のとおり、見た目は... 素晴らしいとは言えません。だから私は、背景画像を調べて削除しようとしています.ui-iconコンテンツ プロパティ セットを使用します。基本的に、その名前の FontAwesome アイコンが存在する場合は、jQM アイコンを削除します。

getComputedStyle について学んだときは興奮しましたがwindow.getComputedStyle(this,':before').content != ''、いくつかのバリエーションを試してみましたが、役に立ちませんでした。'::before' と 'before' だけを 2 番目のプロパティとして試し、空の文字列ではなく null または false と比較しようとしましたが、結果は同じです。すべてのアイコンが検出されるか、アイコンがまったく検出されないかのどちらかです。

Chrome のコンソールにダンプするwindow.getComputedStyle(this,':before').contentと、コンテンツがあるはずの場合でも、空の文字列のように見えるものが常に表示されます。Firefoxはそれを正しく理解しています。これが Chrome のことなのか Webkit のことなのかわかりません。

私は何を間違っていますか？

編集： Windows用のSafari 5をダウンロードしました。それは同じだ。コンテンツは常に空の文字列です。get に使用している jQuery セレクターと関係があるのではないかと考え始めていますthis。

疑似要素 を使用して、その後に記号<a>を表示したい要素があります。>:after

要素の<a>コンテンツは動的であるため、幅が変化し、コンテンツ イベントが数行にまたがる場合があります (この<a>要素は<div>who の幅が固定されているため)。

>の水平位置を最も長い行の最後から開始したいと思います。つまり、そのright:0;ルールを与えると、要素の右端にある必要があります (現在、垂直位置は関係ありません)。

FF ではこのように動作しますが、Chrome と IE では、>が最も短い行の最後に表示されます。

ブラウザ間の違いの原因を理解したいのですが、さらに重要なことは、すべてのブラウザが FF のように動作すること、:afterつまり を最も長い行の最後に配置することです。それは可能ですか？

上記のコードをdabbletに入れました