Question

我遇到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>

Answer 1

尝试使用IE Developer Toolbar，它可以让您检查元素的运行情况，并为您提供所涵盖区域的概述。它可能会让你更好地理解这个问题。

Answer 2

解决方案：

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

显示：阻止

Answer 3

我遇到了很多。而不是寻找特定的行为，尝试通过明确设置填充和img / div / etc选择器的边距属性为0进行完整性检查，设置border-style：none border-width：0px border =“0”等。

IE Dev Toolbar是必备软件，但它是否可以帮助您解决单像素问题。

Answer 4

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

Answer 5

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

Answer 6

解决方案......显示：阻止

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

Answer 7

真正的解决方案：

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

IE7：菜单上方的标题

7 个答案: