IE7：菜单上方的标题答案

【问题标题】：IE7: header above menuIE7：菜单上方的标题
【发布时间】：2021-10-25 01:07:55
【问题描述】：

我在使用 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>

【问题讨论】：

标签： html css internet-explorer-7

【解决方案1】：

试试 IE 开发工具栏，它可以让您检查元素正在发生的事情并为您提供所涵盖区域的轮廓。它可能会让您更好地理解问题。

【讨论】：

【解决方案2】：

解决办法：

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

显示：块

【讨论】：

【解决方案3】：

我经常遇到这种情况。与其寻找特定的行为，不如尝试通过将 img/div/etc 选择器的填充和边距属性显式设置为 0 来进行完整性检查，设置 border-style: none border-width: 0px border="0" 等。

IE Dev Toolbar 是必备工具，但它能否帮助您解决单像素问题却不太可能。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

CSS 重置（如YUI Reset CSS）非常适合这种事情。他们重置了许多 HTML 元素的内边距、边距和其他显示属性，以最大限度地减少显示差异。

【讨论】：

【解决方案6】：

解决方案...显示：块

在不知道浏览器的渲染模式的情况下无法正确回答该问题；如果你有 CSS 渲染问题，你需要告诉人们你有什么文档类型。您所指的图像行为在怪癖模式与标准模式中有所不同。最小的测试用例必须包含完整的 HTML 文档和重现问题的 CSS。请不要在没有给他们所需的信息的情况下向人们寻求帮助，而不会浪费他们的时间来轻松回答......

【讨论】：

【解决方案7】：

真正的解决方案：

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

【讨论】：