Question

我在简单的HTML页面布局方面遇到了麻烦。请帮忙。

这是我要去的布局......

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

orange = body
blue / red = frame div
green =标题图片
黑/白=菜单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像素差距？

Answer 1

它与IMG标记的默认规则有关。

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

img{
    display:block;
}

Answer 2

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

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

编辑：说完后，您的菜单也应标记为无序列表（UL）。

Answer 3

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

由于INLINE模式的文本对齐，freelookenstein给出了解除额外空间的解决方案。

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

您可以将display：block属性添加到图像上的类或内联样式。

或类似的东西：

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

就我个人而言，我建议限制显示：仅阻止您知道用于网站布局的图像，或者专门插入框中的图像。在这种情况下，您经常在父元素上有一个类，如：

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

.imagebox img { display:block; }

Answer 4

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

将导航链接结构化为列表会产生更多的语义标记。它更能代表您呈现的内容。如果您要查看没有CSS样式的网站（您可以使用适用于Firefox的Web Developer Toolbar执行此操作），您仍然可以获得有意义的网站布局表示。如果您希望移动浏览器可以查看该网站，这一点尤为重要。
这也可能（稍微）帮助搜索引擎优先处理内容并提升排名。
您可以为列表项定义样式，在一侧有边框，有些边距可以获得“管道分隔”效果。这将是可重复使用的，并且可以在将来更轻松地将菜单更改为其他样式。

请参阅A List Apart - CSS Design: Taming Lists

有一个例子显示完整的CSS来实现这种效果。

IE与FF中的HTML DIV和IMG标签间距

4 个答案: