Css iframes对齐：如何删除页脚上方的空间？_Css_Iframe

Css iframes对齐：如何删除页脚上方的空间？

css iframe

Css iframes对齐：如何删除页脚上方的空间？,css,iframe,Css,Iframe,我使用了四个iFrame：header、menuframe、bodyframe和footer。菜单框和车身框并排放置。页脚与menuframe和bodyframe之间有一个空格。如何删除它 css: html: 将其用于主IFRAME样式（注意显示：添加了块）：并将其用于menuFrame声明（注意：左侧添加）：下面是一个工作示例：（对于缺少的页面，不要介意“未找到页面”）顺便说一下，您的其他两个类iframe.menuframe和iframe.bodyframe无效，因为此格式的目标

我使用了四个iFrame：header、menuframe、bodyframe和footer。菜单框和车身框并排放置。页脚与menuframe和bodyframe之间有一个空格。如何删除它

css:

html:

将其用于主IFRAME样式（注意显示：添加了块）：

并将其用于menuFrame声明（注意：左侧添加）：

下面是一个工作示例：（对于缺少的页面，不要介意“未找到页面”）

顺便说一下，您的其他两个类

iframe.menuframe

和

iframe.bodyframe

无效，因为此格式的目标是类声明而不是元素的名称。

1）您必须添加：

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

float:left;

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

3）您必须添加：

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

float:left;

到您的“menuframe”iframe，这样径向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>


iframe{display:block；}

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

哦，我忘了放class=“…frame”！！我在iframe上使用了display:table单元格。但它在safari和google chrome中不起作用。

seamless='seamless'

float:left;

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