IE7에서 블록 요소가있는 자동 여백

플로트 왼쪽에 LI 요소를 만들고 그 안에 이미지 ("블록")를 만들려고했습니다. 코드는 IE 7 (및 6)을 제외하고 모든 브라우저에서 정상적으로 작동합니다. LI는 가로 대신 세로로 구성됩니다. IE7에서 코드가 제대로 작동하려면 어떻게해야합니까? (코드 번호는 http://jsbin.com/ilexa/edit입니다.)IE7에서 블록 요소가있는 자동 여백

CODE :

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"> 

<style> 
ul { 
    width:700px; 
} 
li { 
    float:left; 
    margin:10px; 
} 
li img { 
    display:block; 
    margin: 0 auto ; 
    width:50px; 
    height:50px; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
</ul> 
</body> 
</html>

출처

2010-12-05 Gidi

가 블록으로 <img>이 필요하다? 공백을 <li>으로 완전히 처리 할 수 없습니까? 또는 <img>을 float: left 또는 심지어 inline-block (Block-level elements within display: inline-block 참조)으로 선언 할 수도 있습니다.

출처

2010-12-05 09:59:31

@Matrin - 나중에 LI에 더 많은 내용을 삽입하고 있기 때문에 블록으로 이 필요합니다. (소스를 간단하게 만들기 위해 포함시키지 않았습니다.) 왜 "블록"속성이이 문제를 야기해야합니까? (Gidi) – Joel

나는 IE가 float에 싸여 있음에도 불구하고 라인 당 하나의 블록을 허용하는 "표준"블록 레이아웃을 따랐다 고 생각합니다. 이미지 자체에'float'을 설정하고 블록을 유지하십시오 - 도움이됩니까? –

IE7에서 블록 요소가있는 자동 여백

답변

관련 문제