IE7은 정렬되지 않은 목록에 목록 스타일 이미지를 표시하지 않습니까?

Question

정렬되지 않은 목록을 사용하는 웹 사이트를 만들었습니다. 이 목록은 CSS의 list-style-image 속성을 사용하는 이미지 (일부 ul의 틱, 다른 틱의 틱)를 사용합니다. IE7을 제외한 모든 브라우저에서 정상적으로 작동합니다.

IE7에서 페이지를 볼 때 목록이 표시되지만 다른 모든 브라우저 (IE8, IE9, Chrome, Firefox, 심지어 Safari)가 선택하는 것처럼 이상한 이미지는 표시되지 않습니다. 그것을 표시하고 그것을 표시하십시오.

#carousel ul.benefits { 
float: right; 
width: 573px; 
margin-right: 18px; 
margin: 0px; 
margin-top: 10px; 
padding: 0px; 
padding-left: 30px; 
} 

#carousel ul.benefits li { 
font-family: "OpenSansRegular",Tahoma,sans-serif; 
font-size: 1.8em; 
font-weight: normal; 
color: #bdbdbd; 
list-style-image:url('images/white-tick.png'); 
float: left; 
width: 100%; 
} 

html로 :

<ul class="benefits"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

그것은 내가 전에 건너 온 적이 이상한 문제와 하나

다음은 CSS입니다.

Answer 1

IE7에 대해 알려진 버그가 있습니다. 떠 다니는 목록 항목에는 목록 마커 이미지가 표시되지 않습니다.

배경 이미지와 패딩을 사용하여 동일한 효과를 얻을 수 있습니다. 레오, 당신은 배경 이미지 사용해야합니다 말했듯이 http://reference.sitepoint.com/css/list-style-image#compatibilitysection

Answer 2

가 :

#carousel ul.benefits li { 
background: url("images/white-tick.png") no-repeat 2px 5px transparent; /*adjust 2px & 5px until it looks correct */ 
display: block; 
padding: 2px 4px 2px 20px; /*adjust until you have enough left padding to account for your bullet */ 
}