Question

我正在使用四个iframe：标题，menuframe，bodyframe和footer。菜单框和体框并排放置。页脚与菜单框和体框之间有一个空格。我该如何删除它？

的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>

Answer 1

将此用作主IFRAME样式（注释显示：已添加块）：

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

并将其用于menuFrame声明（注意float：left added）：

<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/（对于遗失的网页，不要介意“找不到网页”）

顺便说一下，你的其他两个类iframe.menuframe和iframe.bodyframe没有效果，因为这种格式的目标是类声明，而不是元素的名称。

Answer 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?

iframes alignment：如何删除页脚上方的空格？

2 个答案: