IE7:菜单上方的标题

StackOverflow https://stackoverflow.com/questions/13851

  •  08-06-2019
  •  | 
  •  

题

我在使用 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 开发人员工具栏，它可以让您检查元素的情况并为您提供所覆盖区域的轮廓。它可能会让您更好地理解问题。

其他提示

解决方案： 

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

展示：堵塞

我经常遇到这种情况。与其追查特定行为，不如尝试通过将 img/div/etc 选择器的 padding 和 margin 属性显式设置为 0 来进行健全性检查，并设置 border-style：无边框宽度：0px边框=“0”等

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

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

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

解决方案...显示：堵塞

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

真正的解决方案：

#middle { font-size: 0; line-height: 0; }
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top