Internet Explorer CSS 플로트 마지막 이미지 오프셋

Question

인라인으로 표시되고 서로 옆에 플로팅되는 이미지의 정렬되지 않은 목록이 있습니다. Firefox와 Chrome에서는 모든 것이 정상적으로 보이지만 인터넷 익스플로러에서는 마지막 이미지가 수직으로 약간 아래로 밀려납니다. 왜 이런 일이 일어날 지 아십니까?

http://www.mercedesberk.org/chic-and-new/manhattan-house

그리고 여기에 기본 코드 : 링크는 여기

<div id="fatured_properties"> 
<h4> Also in the Neighborhood </h4> 
    <ul> 
     <li> 
      <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> 
       <img src="<?php bloginfo('template_directory'); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, 'image', $single = true); ?>&amp;h=135&amp;w=180&amp;zc=1" alt="<?php the_title(); ?>" /> 
      </a> 
      <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> 
       <span><?php the_title(); ?></span> 
      </a> 
     </li> 
     ... etc .... 
    </ul> 
</div> 

그리고 CSS :

#fatured_properties { 
    overflow: auto; 
    text-align: center; 
    width: 100%; 
} 

#fatured_properties h3 { 
    text-transform: uppercase; 
    color: #f60; 
    font-size: 13px; 
    padding-bottom: 10px; 
    margin: 0 auto; 
    display: block; 
    width: auto; 
} 

#fatured_properties ul{ 
    display: inline; 
} 

#fatured_properties ul li{ 
    margin: 0 5px; 
    float: left; 
} 

.hamptons_guide #fatured_properties ul li{ 
    margin: 0 14px; 
} 

#fatured_properties ul li img{ 
    display: block; 
    clear: both; 
} 

#fatured_properties ul li span { 
    font: bold 13px "Calibri", Verdana, Helvetica, sans-serif; 
    letter-spacing: 1px; 
    width: 195px; 
    display: block; 
    text-align: left; 
} 

Answer 1

당신의 UL에서 기본 패딩/여백을 제거 그리고 리가 트릭을해야합니다 :

#fatured_properties ul{ 
    margin: 0; 
    padding: 0; 
    display: inline; 
} 

#fatured_properties ul li{ 
    padding: 0; 
    margin: 0 5px; 
    float: left; 
} 

모든 브라우저는 약간 다른 패딩 및 여백 기본값을 가지고 있으므로 모두 0으로 설정 한 다음 필요에 따라 다시 추가하는 것이 좋습니다.

Answer 2

ul 요소의 여백이 IE8에서 문제를 일으키는 것처럼 보입니다. 과 같이, 해당 요소에 margin: 0;을 추가하십시오 :

#fatured_properties ul{ 
    display: inline; 
    margin: 0; 
} 

편집 : 당신이 UL이 인라인으로 선언 한 특별한 이유가 있습니까? UL은 정상적으로 블록 수준의 요소로 동작하며 이미지는 예상대로 계속 서로 부딪칩니다.