画像の周りに背景チェックマークが付いたwrap ulリスト

Question

リストにチェックマーク画像を使用しているときに、画像の周りにulリストをラップするにはどうすればよいですか？私はlist-style-imageプロパティがあることを知っていますが、そこにはクロスブラウザーの問題があります。

htmlはWYSIWYGエディタで作成されたので、これをCSSで修正したいと思っています。ここで

は私のHTML/CSSです： テスト

<style> 
    ul.list-tick li { 
     background-image: url("http://www.psc-cfp.gc.ca/ppc-cpp/images/small-check-mark.jpg"); 
     background-repeat: no-repeat; 
     list-style: none outside none; 
     padding: 0 0 7px 23px !important; 
    } 

</style> 

<p><img style="margin: 0px 10px 10px; float: left;" alt="a" 
     src="http://www.car-myspace-layouts.com/backgrounds/lamborghini/Lambo_gallardo_153_1024x768.jpg" width="97" height="125" /></p> 
<p> 

<ul class="list-tick"> 
    <li>Lorem ipsum dolor sit amet,</li> 
    <li>consectetur adipiscing elit</li> 
    <li>Duis risus magna, vehicula quis faucibus eget, dictum id eros. </li> 
    <li>Fusce sed quam a mi accumsan lacinia posuere quis quam.</li> 
    <li>Phasellus vel justo urna. Nulla scelerisque posuere nisi, sit amet feugiat est egestas sed.</li> 
    <li>Cras id lectus sed sem bibendum luctus sed eu justo.</li> 
    <li>Ut vel magna mauris, et hendrerit lectus. Praesent non nulla orci. Sed eget diam et risus pulvinar dapibus porta ac nisi. </li> 
    <li>Aliquam blandit orci a mi volutpat sagittis. Donec lorem ligula, rutrum a scelerisque quis, sollicitudin ut lorem. </li> 
    <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </li> 
</ul> 

Answer 1

ええと、私はうまくいく解決策を思いついたと思います。私があなたのHTMLに行った唯一の変更は、すべて<li>要素の中に<span>タグを追加することでした。

ライブ、それを参照してください：http://jsfiddle.net/Wexcode/7C6rg/

p { 
    float: left; 
    margin: 0 23px 0 0; } 
ul.list-tick { 
    list-style: none; 
    padding: 0 0 0 23px; } 
ul.list-tick li span { 
    background: url("http://www.psc-cfp.gc.ca/ppc-cpp/images/small-check-mark.jpg") 0 0 no-repeat; 
    padding: 0 0 7px 23px; 
    margin: 0 0 0 -23px; } 

はHTML：我々は、エラーを参照するか、私たちにjsfiddleを表示することができるように

<p><img alt="a" 
src="http://www.car-myspace-layouts.com/backgrounds/lamborghini/Lambo_gallardo_153_1024x768.jpg" width="97" height="125" /></p> 
<ul class="list-tick"> 
    <li><span>Lorem ipsum dolor sit amet,</span></li> 
    <li><span>consectetur adipiscing elit</span></li> 
    <li><span>Duis risus magna, vehicula quis faucibus eget, dictum id eros.</span></li> 
    <li><span>Fusce sed quam a mi accumsan lacinia posuere quis quam.</span></li> 
    <li><span>Phasellus vel justo urna. Nulla scelerisque posuere nisi, sit amet feugiat est egestas sed.</span></li> 
    <li><span>Cras id lectus sed sem bibendum luctus sed eu justo.</span></li> 
    <li><span>Ut vel magna mauris, et hendrerit lectus. Praesent non nulla orci. Sed eget diam et risus pulvinar dapibus porta ac nisi.</span></li> 
    <li><span>Aliquam blandit orci a mi volutpat sagittis. Donec lorem ligula, rutrum a scelerisque quis, sollicitudin ut lorem.</span></li> 
    <li><span>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</span></li> 
</ul> 

Answer 2

問題Iアイコンの背景イメージを使用しています。ブロックレベルの要素はまだ画像の背後にありますが、浮きが重ならないように余白が追加されました。この例では私が作ったことが分かります。青と赤の境界線に注意してください。これらは、pに対応して、ul

http://jsfiddle.net/QdDpk/1/

私はあなたの背景画像を動的に配置するために得ることができるとは思いません。私は弾丸の画像を使用します。私はこれらが信頼できないとは聞いたことがありませんが、もしあなたがこの共有のためのソースを持っているなら。