IE9在左浮動圖像之間添加不需要的空間

Question

我在錨標籤內有六個圖像。在CSS中，它們被左移。

在Chrome/Firefox中，圖像全部相互對接。但在IE9中，所有圖像之間都有空格，我可以看到它們之間的DIV的背景顏色。我怎樣才能讓這些圖像全部彼此接觸？

我的HTML：

<div id="headerMenu"> 
    <a href="<?php bloginfo('url'); ?>/category/cateogry1"><img alt="cateogry1" src="<?php bloginfo('template_directory'); ?>/images/cateogry1.jpg"></a> 
    <a href="<?php bloginfo('url'); ?>/category/cateogry2"><img alt="cateogry2" src="<?php bloginfo('template_directory'); ?>/images/cateogry2.jpg"></a> 
    <a href="<?php bloginfo('url'); ?>/category/cateogry3"><img alt="cateogry3" src="<?php bloginfo('template_directory'); ?>/cateogry3.jpg"></a> 
    <a href="<?php bloginfo('url'); ?>/category/cateogry4"><img alt="cateogry4" src="<?php bloginfo('template_directory'); ?>/images/cateogry4.jpg"></a> 
    <a href="<?php bloginfo('url'); ?>/category/cateogry5"><img alt="cateogry5" src="<?php bloginfo('template_directory'); ?>/images/cateogry5.jpg"></a> 
    <a href="<?php bloginfo('url'); ?>/category/cateogry6"><img alt="cateogry6" src="<?php bloginfo('template_directory'); ?>/images/cateogry6.jpg"></a> 
</div> 

我的CSS：

#headerMenu{ 
height: 50px; 
margin: 0; 
} 

#headerMenu img { 
float: left; 
margin: 0; 
} 

a, img { 
border: 0px; 
margin: 0px; 
padding: 0px; 
} 

將是任何線索感謝....！

Answer 1

我無法在IE9中重現這一點，但我可以在IE8中。

嘗試將包含<img>而不是圖片的<a>浮動。然後將img設置爲display: block。像這樣：

#headerMenu{ 
    height: 50px; 
    margin: 0; 
} 

#headerMenu a { 
    float: left /* Add */ 
} 

#headerMenu img { 
    /* float: left; Remove */ 
    margin: 0; 
} 

a, img { 
    border: 0px; 
    margin: 0px; 
    padding: 0px; 
    display: block; /* Add */ 
} 

Demo here.