Question

问题：

考虑以下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>

在它之上。

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

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

Answer 1

添加

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

或

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

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

Answer 2

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

iframe { display: block; }

Answer 3

快速说明（因为我在IE上遇到了这个问题）...

尝试设置：

font-size: 0px;

这很有用（我相信因为有人建议，iframe是文本基线上的位置）。

Goodluck你们呀！

Answer 4

指定HTML {5}中引入的seamless属性。http://www.quackit.com/html_5/tags/html_iframe_tag.cfm

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

4 个答案: