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 */
}

此处演示