IE7出现问题。我有一个标头，它是IMG。在它下面，我有一个表示菜单的div，它们必须彼此相连，而彼此之间没有空格。两者均为1000px宽度。在Opera和FireFox中，标题和菜单彼此整齐地添加在一起。但是，在IE7中，菜单DIV和IMG之间的空间很小。我尝试在IMG上明确定义填充和边距，但是它不起作用。我之前曾遇到过此问题，所以这似乎是IE7的怪癖。

我的HTML代码：

<div id="middle">
  <img id="ctl00_headerHolder_headerImage" src="pictures/headers/header_home.jpg" style="border-width:0px;" />

  <div id="ctl00_menuPanel" class="menu">
    <a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a> |
    <a id="ctl00_leden" href="Leden.aspx">Leden</a> |
    <a id="ctl00_agenda" href="Agenda.aspx">Agenda</a> |
    <a id="ctl00_fotos" href="Fotos.aspx">Foto's</a> |
    <a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a> |
    <a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a>
  </div>
</div>

解决方案

回答

尝试使用IE Developer Toolbar，该工具栏将使我们检查元素正在发生的情况，并为我们概述所涵盖的领域。它可以使我们对问题有更好的了解。

回答

解决方案：

img {
padding: 0px;
margin: 0px;
display: block;
}

显示：块

回答

我碰到了很多。与其寻找特定的行为，不如尝试通过将img / div / etc选择器的padding和margin属性显式设置为0，设置border-style：none border-width：0px border =" 0"等来进行健全性检查。

IE Dev Toolbar是必不可少的，但它能否解决单像素问题却不太可能。

回答

请注意，IE7不会使用显示块，而是使用空白做了一些严重的奇怪事情；尝试删除图像和div之间的空白，然后看看会发生什么。

回答

CSS重置(例如YUI重置CSS)非常适合这种情况。它们在许多HTML元素上重置填充，边距和其他显示属性，以最大程度地减少显示差异。

回答

The solution...display: block

如果不知道浏览器所处的渲染模式，就无法正确回答该问题。如果我们遇到CSS呈现问题，则需要告诉别人我们拥有哪种文档类型。我们引用的图像行为在"怪癖"模式下与"标准"模式不同。一个最小的测试用例必须包括完整的HTML文档和CSS，以重现该问题。请不要在不给别人提供他们需要轻松回答而又不浪费时间的信息的情况下向他们求助...

回答

真正的解决方案：

#middle { font-size: 0; line-height: 0; }