IE 与 FF 中的 HTML DIV 和 IMG 标记间距答案

【问题标题】：HTML DIV and IMG tag spacing in IE vs. FFIE 与 FF 中的 HTML DIV 和 IMG 标记间距
【发布时间】：2009-02-09 15:32:23
【问题描述】：

我在简单 HTML 页面的布局上遇到问题。请帮忙。

这是我想要的布局...

Layout http://img516.imageshack.us/img516/9637/layoutfk5.gif

橙色 = 身体
蓝色/红色 = 框架 div
绿色 = 标题图片
黑/白 = 菜单 div

在 Internet Explorer 中看起来是正确的，但在 Firefox、Safari 和 Chrome 中，我的图像（标题）和我的 div（菜单）之间有 4 像素的差距。

Internet Explorer、Firefox、Safari 和 Chrome...

Browsers http://img516.imageshack.us/img516/3292/browserszi8.gif

这是我的 HTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    ...
    <body>
        <div id="frame">
            <img id="header" src="images/header.jpg" width="700" height="245" alt="" /><div id="menu">
                <strong>One</strong> &nbsp;|&nbsp;
                <a href="two.html">Two</a> &nbsp;|&nbsp;
                <a href="three.html">Three</a> &nbsp;|&nbsp;
                <a href="four.html">Four</a> &nbsp;|&nbsp;
                <a href="five.html">Five</a> &nbsp;|&nbsp;
                <a href="six.html">Six</a> &nbsp;|&nbsp;
                <a href="seven.html">Seven</a> &nbsp;|&nbsp;
                <a href="eight.html">Eight</a> &nbsp;|&nbsp;
                <a href="nine.html">Nine</a>
            </div>
            <div id="content">
                ...
            </div>
            ...
    </body>
</html>

请注意，IMG 和菜单 DIV 之间没有空格。

这是我的 CSS...

...

div#frame {
    background: #FF0000;
    margin-right: auto;
    margin-left: auto;
    width: 700px;
    border: 5px #30AADE solid;
}

div#frame img#header {
    margin: 0;
    padding: 0;
    border: 0;
}

div#frame div#menu {
    margin: 0 auto 0 auto;
    padding: 5px 0 5px 0;
    border-top: solid 2px #FFFFFF;
    text-align: center;
    font-size: small;
    color: #88BE34;
    background-color: #000000;
}

div#frame div#menu strong {
    font-size: medium;
    color: #FFFFFF;
}

div#frame div#menu a {
    color: #88BE34;
}

为什么 Firefox、Safari 和 Chrome 显示 4 像素的差距？

【问题讨论】：

检查这个问题stackoverflow.com/questions/489974/…。它应该可以解决您的问题。
我只想说这是一个布局合理的问题：图像、代码示例、明确的问题、前期目标。我希望更多的问题写得这么好。
是的，annakata 说的。绝对是提出 HTML/CSS 问题的方法！还有，头像不错。 :)

标签： html css cross-browser

【解决方案1】：

这与IMG标签的默认规则有关。

我建议始终在您的样式表中使用它作为默认规则：

img{
    display:block;
}

【讨论】：

【解决方案2】：

我的猜测是图像元素行的行高，因为 IMG 是一个内联元素。您可以通过提供 img#header display: block; 来修复它。

无论如何，您真正应该做的是删除整个图像并使用 H1 元素加上许多图像替换技术之一。

编辑：话虽如此，您的菜单也应标记为无序列表 (UL)。

【讨论】：

【解决方案3】：

在“标准”浏览器中（实际上是带有正确 DOCTYPE 的 IE6！），您的图像默认为 INLINE 模式，因此它的间距就好像它是位于文本基线上的一个字母。

freelookenstein 给出了解决方案，去除因 INLINE 模式的文本对齐而导致的多余空格。

这是解决方案，但我会小心使用 display:block 默认情况下，因为这很可能会弄乱您的典型网页内容。

您可以将 display:block 属性添加到类中，也可以单独在图像上添加内联样式。

或者是这样的：

img { display:block; }
p img, ul img, td img /* etc*/ { display:inline; }

我个人建议将 display:block 限制为您知道用于站点布局的那些图像，或者那些专门嵌入框中的图像。在这种情况下，您通常在父元素上已经有一个类，例如：

<div class="imagebox">
   <img .... />
</div>

.imagebox img { display:block; }

【讨论】：

【解决方案4】：

您应该将菜单链接包装在无序列表中，然后使用 CSS 设置项目的样式。这样做有一些原因：

将导航链接结构化为列表会产生更多语义标记。它更好地代表了您正在呈现的内容。如果您要查看完全没有 CSS 样式的站点（您可以使用 Firefox 的 Web 开发人员工具栏做到这一点），您仍然会获得站点布局的有意义的表示。如果您希望该网站可供移动浏览器查看，这一点尤其有意义。
这也可能（稍微）帮助搜索引擎优先考虑内容并提高您的排名。
您可以为列表项定义一种样式，其中一侧有边框和一些边距，以获得“管道分隔”效果。这将是可重复使用的，并且将来可以更轻松地将菜单更改为其他样式。

见A List Apart - CSS Design: Taming Lists

那里有一个示例显示了实现此效果的完整 CSS。

【讨论】：