각각 자체 총알 이미지를 어떻게 줄 수 있습니까?

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가 말한 내용에도 불구하고 목록 스타일 이미지 규칙이 어떻게 든 상인이라는 것을 발견했습니다. 규칙을 인화하면 :

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

그러면 모두 잘됩니다. 테스트 케이스에 다른 규칙이 없기 때문에 선택기에 UL 또는 LI를 포함하는 실행중인 실행중인 이유는 왜 다른 결과를 제공하는지 잘 모르겠습니다.

Answer 1

먼저 "quirks"모드인지 여부를 결정하십시오. 많은 CSS 속성의 경우 차이가 발생하기 때문입니다.

둘째, W3C 지정합니다 URL은 이중 인용문으로되어야합니다 (인용문을 사용하지는 않지만). 스펙을 사용하여 자신을 절약하여 라인 아래로 문제를 해결하십시오.

DocType에 "Strict"를 지정하는 경우 브라우저에는 표준에 따라 이중 인용문이 필요할 수 있습니다.

Answer 2

이 시도:

#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');
}

Answer 3

이것이 당신의 문제인지 확실하지 않지만 이미지에 대한 상대 링크를 사용하고 있습니다. CSS에서 상대 링크를 사용하는 경우 CSS 파일과 관련이 있지만 인쇄 된 경우 HTML 페이지와 관련이 있습니다.

Answer 4

문제는, 나는 그것이 당신의 코드를 시도했다는 것입니다. 이미지가 존재하지 않는 경우입니다. CSS에 지정한 이미지가 실제로 폴더 이미지에 있거나 잘못된 것이 아닌지 확인해야 할 수도 있습니다.

참고 : Firefox와 IE 모두에서.

Answer 5

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;
}

Answer 6

당신은 그 이미지가 당신이 생각하는 곳인지 더 두 번 확인할 수 있습니다. 이 예제는 이미지가 없으면 잘 작동합니다.

Answer 7

나는 결코 생각하지 않았을 것이다. URL을 인용하면 :

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

작동하기 시작합니다. 나는 그것을 고려하지 않고 멈 춥니 다. 나는 그것이 차이를 만들어서는 안된다고 생각했다.

여러분의 도움에 감사드립니다.

Answer 8

목록 스타일 유형을 추가해 보시면 : 없음; #contact-list에? 아마도 당신의 목록 스타일 대신 : 선언.

Answer 9

그것은 그것을 제안하는 것이 고통 스럽지만, 당신은! 중요한 깃발을 시도 했습니까? 또한 다른 브라우저에서 동일하게 행동합니까? 이것이 Firefox userchrome.css 파일에있는 것이라면 어떻게해야합니까?

Answer 10

목록 스타일 이미지 속성 후에는 중요한 것을 추가 할 수 있습니다.

Answer 11

#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;
}