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

题：

考虑以下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之间的两个iframe(文件夹内容/电子邮件内容)之间的距离为2到5毫米(没有测试FireFox)。
甚至更令人不安，似乎没有办法摆脱这个空间(除了删除<！DOCTYPE html&gt ;. 为什么？我的意思是，绿色来自父元素的背景颜色，但为什么两个iframe之间有空格？

解决方法

只是添加

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

要么

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

<！DOCTYPE html>将浏览器置于标准模式，其中内联元素放置在包含块的基线上，并且字符下降符的空间总是在行框中分配。在其他模式下，只有在与iframe位于同一行上的可打印字符时才会创建该空格。通过以上任一方法将iframe移动到基线之外，可以将下降的空间放置在iframe的高度内。

原文链接：https://www.f2er.com/html/233100.html

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

解决方法

猜你在找的HTML相关文章