HTML：iframe 元素之间的奇怪空间？答案

【问题标题】：HTML: Strange space between iframe elements?HTML：iframe 元素之间的奇怪空间？
【发布时间】：2011-11-09 13:14:59
【问题描述】：

问题：

考虑以下 HTML：

<html>
<head></head>

<body>

<div style="float:left;">
  <div style="background-color: Red; padding-top: 2mm; padding-bottom: 2mm;">
        Dock: Usage controls/symbol list here
    </div>


    <div style="height: 300px; background-color: Khaki; display:block; float:left; overflow: scroll;">

        <ul style="background-color: White; float: left; margin: 0px; padding: 0px; padding-left: 30px; padding-right: 10px;">
            <li>
                <a href="Folders/Content/Inbox" target="ifrmFolderContent" >
                    Posteingang / Inbox
                </a>
            </li>
            <li>
                <a href="Folders/Content/Drafts" target="ifrmFolderContent" >
                    Entwürfe / Drafts
                </a>
            </li>
            <li>
                <a href="Folders/Content/Sent Items" target="ifrmFolderContent" >
                    Gesendet / Sent Items
                </a>
            </li>
            <li>
                Archiv / Archive
            </li>
            <li>
                Papierkorb / Trash
            </li>
            <li>
                Junk / Crap
            </li>
            <li>
                Scam
            </li>
            <li>
                Spam
            </li>
            <li>
                Virus
            </li>
            <li>
                Abrufen / Send & Receive
            </li>
            <li>
                Verfassen / Compose
            </li>
            <li>
                Adressbuch / Address book
            </li>
        </ul>
    </div>




    <div style="width: 400px; height: 300px; background-color: Green; display:block; float:left; margin: 0px; padding: 0px;">



       <iframe marginwidth="0" marginheight="0" hspace="0" vspace="0"  name="ifrmFolderContent" src="http://www.yahoo.com" frameborder="0" style="overflow: none; width: 400px; height: 150px; background-color: Orange; margin: 0px; padding: 0px;">

         Folder Content
       </iframe>



       <iframe marginwidth="0" marginheight="0" hspace="0" vspace="0"  name="ifrmEmail" src="http://www.msn.com" frameborder="0" style="overflow: none; width: 400px; height: 150px; background-color: Orange; margin: 0px; padding: 0px;">

         E-Mail Content

       </iframe>



    </div>



    <div style="background-color: Indigo; padding-top: 2mm; padding-bottom: 2mm; clear: left;">
        Copyright here
    </div>

</div>



</body>

</html>

它的渲染完全符合预期（Chrome + IE8）。

但是现在，我补充一下：

<!DOCTYPE html>

在上面。

突然间，我在 Chrome 和 IE8（尚未测试 FireFox）中的两个 iframes（文件夹内容/电子邮件内容）之间获得了 2 到 5 毫米的绿色空间。更令人不安的是，似乎没有办法摆脱这个空间（除了删除<!DOCTYPE html>。

为什么？我的意思是，绿色来自父元素的background-color，但是为什么两个iframes 之间有一些空格？

【问题讨论】：

标签： html xhtml

【解决方案1】：

只需添加

<style>iframe { vertical-align:bottom; } </style>

或

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

<!DOCTYPE html> 将浏览器置于标准模式，其中内联元素放置在包含块的基线上，并且始终在行框中为字符的下降部分分配空间。在其他模式下，仅当与 iframe 在同一行上存在可打印字符时才会创建该空间，此处并非如此。通过上述任何一种方法将 iframe 移离基线，可以将下降器的空间放置在 iframe 的高度内。

【讨论】：

现在回答我一个更难的问题：为什么默认是 iframe display:inline？

【解决方案2】：

标准模式下的iframe 默认为display: inline。这意味着它们将被放置在文本基线上，即。 'a' 的底部结束的地方，而不是 'y' 的底部结束的地方。您看到的间隙是文本行中的下行空间。这应该删除它：

iframe { display: block; }

【讨论】：

【解决方案3】：

只是一个简短的说明（因为我在 IE 上遇到了这个问题）...

尝试设置：

font-size: 0px;

这行得通（我相信因为正如有人建议的那样，iframe 是文本基线上的位置）。

祝你们好运！

【讨论】：

这应该得到更多的支持。你需要这个来使 vertical-align: bottom 在 IE 中工作。

【解决方案4】：

指定seamless 属性，该属性在 HTML 5 中引入。http://www.quackit.com/html_5/tags/html_iframe_tag.cfm

【讨论】：

遇到同样的问题，seamless 属性似乎对我没有任何改变。只是为了让别人知道，永远不知道。
seamless 属性不再存在 stackoverflow.com/questions/4804604/…