iframe 对齐：如何删除页脚上方的空间？答案

【问题标题】：iframes alignment: how do i remove the space above the footer?iframe 对齐：如何删除页脚上方的空间？
【发布时间】：2013-08-10 15:16:48
【问题描述】：

我正在使用四个 iframe：页眉、菜单框、正文框和页脚。 menuframe 和 bodyframe 并排放置。页脚与菜单框和正文框之间有一个空格。如何删除它？

css:

iframe{
    border:0;
    margin:0;
}
iframe.menuframe{
    border:0;
    margin:0;
    width:183px;
}
iframe.bodyframe{
    border:0;
    margin:0;
    width:300px;
}

html:

<iframe name="header" src="Header.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; width:100%; height:110px;"></iframe>
<iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;"></iframe>
<iframe name="bodyframe" src="Home.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;"></iframe>
<iframe name="footer" src="Footer.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; width:100%; height:25px;"></iframe>

【问题讨论】：

标签： css iframe

【解决方案1】：

将此用于您的主要 IFRAME 样式（注意显示：添加了块）：

iframe{
    border:0;
    margin:0;
    display:block;
}

并将其用于您的 menuFrame 声明（注意 float:left 添加）：

<iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" style="border-style:none; padding:0; border:0; height:590px;float:left;"></iframe>

这是一个工作示例：http://jsfiddle.net/tU8XN/1/（不要介意“找不到页面”丢失页面）

顺便说一下，您的其他 2 个类 iframe.menuframe 和 iframe.bodyframe 无效，因为这种格式针对的是类声明而不是元素的名称。

【讨论】：

哦，我忘了放 class="...frame"！！

【解决方案2】：

1) 您必须添加：

<style>iframe { display:block; } </style>

在您的样式表或页面标题中。这是因为 iframe 默认是内联的。这意味着它们将被放置在文本基线上，即。 'a' 的底部结束的地方，而不是 'y' 的底部结束的地方。您看到的间隙是文本行中的下行空间。这应该删除它。

2) 你必须添加属性：

seamless='seamless'

对于您的每个 iFrame：在 HTML5 中，不再支持属性 frameBorder。

3) 你必须添加：

float:left;

到你的'menuframe' iframe，这样adiacent iframe就会出现在它的右边。

此更改应该适用于大多数浏览器。

所以你的代码应该是这样的：

<!DOCTYPE html>
<html>
    <head>
        <style>iframe { display:block; } </style>
    </head>
    <body style="margin:0;padding:0">
        <iframe name="header" src="Header.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="width:100%; height:110px;"></iframe>
        <iframe name="menuframe" src="Menu.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="float:left;height:590px;"></iframe>
        <iframe name="bodyframe" src="Home.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="height:590px;"></iframe>
        <iframe name="footer" src="Footer.html" frameborder="0" cellspacing="0" scrolling="no" seamless='seamless' style="width:100%; height:25px;"></iframe>
    </body>
</html>

注意：我删除了一些无用的样式属性。这些答案采取了一些解决方案：

Remove border from IFrame

HTML: Strange space between iframe elements?

【讨论】：

我在 iframe 上使用了 display:table-cell。但它在 safari 和 google chrome 中不起作用。