Internet Explorer CSS Float последнее смещение изображения

Question

У меня есть неупорядоченный список изображений, которые отображаются встроенными и плавают рядом друг с другом. В Firefox и Chrome все выглядит хорошо, но в Internet Explorer последнее изображение немного сдвигается вертикально вниз. Есть идеи, почему это произойдет? Ссылка здесь:

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 и li должно помочь:

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

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

Все браузеры имеют немного разные отступы и значения по умолчанию, поэтому рекомендуется установить их все на ноль, а затемдобавьте их обратно по мере необходимости.

Answer 2

Похоже, что маргинал элемента ul вызывает проблемы в IE8.Попробуйте добавить margin: 0; к этому элементу, например так:

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

РЕДАКТИРОВАТЬ: Есть ли конкретная причина, по которой вы объявили этот ul как встроенный?UL обычно ведет себя как элемент уровня блока, и изображения все равно будут плавать относительно друг друга, как и ожидалось.