1

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

4

7 回答 7

3

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

于 2008-08-17T19:12:09.193 回答
0

解决方案：

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

显示：块

于 2008-08-17T19:12:51.407 回答
0

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

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

于 2008-08-17T19:16:03.380 回答
0

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

于 2008-08-17T19:23:49.933 回答
0

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

于 2008-08-17T19:25:43.813 回答
0

解决方案...显示：块

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

于 2008-08-17T20:20:50.193 回答
0

真正的解决方案：

#middle { font-size: 0; line-height: 0; }
于 2008-08-18T04:28:37.867 回答