css - それぞれどのように与えればよいでしょうか
独自の弾丸画像？

Question

私が試してみました

<ul id="contact_list">
    <li id="phone">Local 604-555-5555</li>
    <li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>

と

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    list-style-image: url(images/small_wood_phone.png);
}

#contact_list #i18l_phone
{
    list-style-image: url(images/i18l_wood_phone.png);
}

無駄に。ディスクのみが表示されます。個々のリスト項目に独自の箇条書きを付けたい場合、背景画像を使用せずに css でこれを達成するにはどうすればよいですか。

編集: firebug が教えてくれたことにもかかわらず、 list-style-image ルールが何らかの形でオーバーライドされていることを発見しました。ルールをインライン化すると、次のようになります。

    <li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>

その後、すべてが順調です。実行中のテストケースには、セレクターに ul または li を含む他のルールがないため、インライン化によって異なる結果が得られる理由がわかりません。

score 9 · Accepted Answer

これを試して：

#contact_list li
{
    list-style: none;
}

#contact_list li#phone
{
    list-style-image: url('images/small_wood_phone.png');
}

#contact_list li#i18l_phone
{
    list-style-image: url('images/i18l_wood_phone.png');
}

score 7 · Accepted Answer

これがあなたの問題かどうかはわかりませんが、画像への相対リンクを使用しています。cssで相対リンクを使う場合はcssファイルからの相対ですが、インライン化するとhtmlページからの相対になります。

score 3 · Accepted Answer

問題は、私はあなたのコードを試してみました。そうでないのは、画像が存在しない場合だけです。CSS で指定した画像が実際にフォルダー images にあるか、スペルミスがないかを確認する必要があるかもしれません。

注：FirefoxとIEの両方で。

score 3 · Accepted Answer

多くの CSS プロパティで違いが生じるため、最初に「quirks」モードかどうかを判断します。

次に、W3cでは、URL を二重引用符で囲む必要があると規定しています (ただし、私は二重引用符も使用していません)。スペックを使用して、将来のトラブルを回避してください。

DOCTYPE で「strict」を指定している場合、標準に従って、ブラウザで二重引用符が必要になる場合があります。

score 2 · Accepted Answer

私は決して考えなかったでしょう。URLを引用すると、次のようになります。

#contact_list #phone
{
    list-style-image: url("/images/small_wood_phone.png");
}

それは働き始めます。引用を外すと、停止します。それは違いを生むべきではないと思いました。

助けてくれてありがとう、みんな。

score 2 · Accepted Answer

それらの画像が自分が思っている場所にあることを再確認してください。この例は、画像が欠落していない限り正常に機能します。

score 2 · Accepted Answer

CSSでは、少し異なる方法で行うことをお勧めします-つまり：

#contact_list
{
  list-style: none;
}

#contact_list li {
  padding-left: 20px; /* assumes the icons are 16px */
}

#contact_list #phone
{
  background: url(images/small_wood_phone.png) no-repeat top left;
}

#contact_list #i18l_phone
{
  background: url(images/i18l_wood_phone.png) no-repeat top left;
}

score 1 · Accepted Answer

list-style-type: none; を追加してみてください。#連絡先リストに? おそらくあなたの list-style: 宣言の代わりに。

score 1 · Accepted Answer

提案するのは面倒ですが、!important フラグを試しましたか? また、他のブラウザでも同じように動作しますか? これが Firefox の userChrome.css ファイルにあるとしたらどうでしょうか?

score 0 · Accepted Answer

list-style-imageプロパティの後に！importantを追加してみてください。これにより、オーバーライドされなくなります。

score -1 · Accepted Answer

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    background-image: url(images/small_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}

#contact_list #i18l_phone
{
    background-image: url(images/i18l_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}

css - それぞれどのように与えればよいでしょうか独自の弾丸画像？

11 に答える 11

Related

Reference

css - それぞれどのように与えればよいでしょうか
独自の弾丸画像？