問題タブ [image-replacement]

今日は少し太っているかもしれませんが、CSS のヘルプが必要です。一見シンプルな商品レビュー表示に取り組んでいます。これは div (.rating) で、次の 2 つの要素があります。

1. <strong class="score fourStars">Rated 4 out of 5 stars</strong>
2. <span class="reviewsCount">average from 34 reviews</span>

HTML フラグメント:

CSS

問題

スプライトからうまく機能するようになりました。問題はどうやって中央揃えにするか!? 私を救うためにインラインブロックを探していましたが、どうやらIE7で動作する必要があります。くそ。

基本的な視覚的な例

おそらく、私は明らかな何かを見逃しています。おそらく、誰かが私を光の方向に向けることができます. text-align: center を設定すると、レビュー部分の数だけが整列するように見えますが、画像に置き換えられたレビューの星は整列しません。

ヘルプ...

私は、initializr.com からレスポンシブ バージョンの html5 ボイラープレートを使用しています。私のサイトではカスタム ロゴを使用しているため、.ir クラスを h1 に追加しました。

このような

ドキュメントによると

image-replacement を適用する任意の要素に .ir クラスを追加します。要素のコンテンツを画像に置き換える場合は、特定の background-image: url(pathtoimage.png);、幅、および高さも設定して、置き換え画像が表示されるようにしてください。

だから私はこれらの行をコードに追加しました

問題は、特定の幅と高さです。それらを取り除くことはできませんが、ロゴはこの方法では反応しません。アイデア？これがフィドルです。http://jsfiddle.net/qeW3e/

css画像置換を使用して、ヘッダーをff、サファリ、オペラのリンクとして機能させることができました

IE でサイトを最適化しようとしています。月曜日にサイトを立ち上げる前の最後のステップですが、IE 8 または 9 ではロゴがまったく表示されませんが、驚くべきことに IE 7 では表示されます。ディスプレイをインラインブロックにすることでIE9に表示されるロゴ

これを行うと、画像がリンクではなくなりますが、これを修正する方法を知っている人はいますか? 画像置換を使用する代わりに、HTML に画像を配置しますが、SEO の観点からは、画像置換を使用する方が優れていることが頭に浮かびました。

かなり単純なようですが、動作させることができません。

divには、Facebook/Twitterのリンクが含まれています。それが機能する方法は、画像が表示され、誰かがその画像にカーソルを合わせると、画像が消えてソーシャルアイコンに置き換わるというものです。

div内のテキストを処理するコードがありますが、画像/スクリプトを追加するとすぐに壊れてしまうようです。（私が持っているコードでも画像が消えることはありません。それは私がその方法を理解していないことです）。

これが私が持っているものです：

次のCSSを使用します。

これはjsfiddleにあります：http：//jsfiddle.net/randomlysid/dxwma/1/

可能であればcssでこれを実行したいのですが、それは私がよく知っていることですが、jQueryがそれを実行する唯一の方法である場合は、それも機能します。

ありがとう！

I'm trying to do implement image resizing techniques, and they all work very well -- that is, until you pop in a:

Example: http://jsfiddle.net/mAGhh/

Has anyone dealt with this before? I could certainly wrap all the elements and use image replacement then, but I'm pretty sure I will run into inline issues ....

irHTML5 ボイラープレート css を使用しており、クラスをフッター メニューに適用したいと考えています。メニューはリスト形式で、インラインブロックを使用してこのリストを横方向に表示します。

これがコードのフィドルです。画像の置換が機能していることがわかりますが、(画像のない) 後のテキスト メニュー要素は下に移動しています。これは.ir:before、ブロック要素をシミュレートする css ルールが原因で、ある程度のスペースが必要です。

この副作用なしで HTML5 ボイラープレート手法を使用する方法はありますか? text-indent:-9999pxそうでない場合は、テクニックに戻ります。

おまけの質問: テキストインデントと比較して、HTML5 ボイラープレート手法の利点は何ですか?

私は微妙ですが厄介な問題を抱えています：CSS画像の置換で「閉じる」クロスを実装しようとしています。HTMLは

ここの画像は30px×30pxの透明な正方形です。CSSは

2つの画像は、30ピクセル×30ピクセルの透明な正方形で、青と赤の「閉じる」十字があります。の上ではなく、ホバリングする:hoverだけで応答するように見えるため、結果はあまりうまく機能しません。デモについてはこちらをご覧ください。div

私はここで何が間違っているのですか？

Kellumメソッドで奇妙なバグを見つけました。

基本的に Webkit では、CTRL+F を押しHelloてテキストを検索するとビューに戻ってきます (Enter キーを数回押して循環させます)。これは、画像の置換などに使用するときに問題になります。可能であれば、これをどのように修正できますか? 「ケラム」メソッドの使用を維持しながら？

http://jsfiddle.net/4d5H6/

--改ページ--

画像要素

この場合、監査用のすべての画像がページ上で互いに下にレンダリングされます。画像が水平方向にレンダリングされ、ドキュメントの幅に達したときに次の行に続きます。

編集

[audit_sub1; block=begin;]から～まで[audit_sub1; block=end;]を一行で書くと。次の結果が得られます。

• 画像 1 は左上に配置されます (正しい)
• 画像 2 が画像 1 の隣に配置されている (正しい)
• 画像 3 は画像 1 の上にレンダリングされます (正しくありません。幅に達したため、新しい行にレンダリングしたい)

こんにちは、次のコードを使用して、CSS を使用して Web サイトの画像を置き換えています。

このコードは、Safari と Chrome に適しています。Firefoxで同じ仕事をするために使用できるコードを知っている人はいますか?