IE9在左浮动图像之间添加不必要的空间

Question

I have six images inside anchor tags. In CSS they are floated left.

In Chrome/Firefox, the images are all butted right up against each other. But in IE9 there is a space between all the images and I can see the background colour of the DIV between them. How can I make these images all touch right up to each other?

My 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>

My CSS:

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

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

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

Would be grateful for any clues....!

Answer 1

I couldn't reproduce this in IE9, but I could in IE8.

Try floating the <a> that contains the <img> rather than the image. Then set the img to display: block . Like this:

#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.