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中重现。

尝试浮动包含<a>而非图片的<img>。然后将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.

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

1 个答案: