HTML：iframe元素之间的奇怪空间？ [英] HTML: Strange space between iframe elements?
问题描述
问题：
考虑以下HTML：
< ; HTML>
< head>< / head>
< body>
< div style =float：left;>
< div style =background-color：Red; padding-top：2mm; padding-bottom：2mm;>
Dock：使用控制/符号列表在这里
< / 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 =文件夹/内容/收件箱target =ifrmFolderContent>
Posteingang /收件箱
< / a>
< / li>
< li>
< a href =文件夹/内容/草稿target =ifrmFolderContent>
Entwürfe/草稿
< / a>
< / li>
< li>
< a href =文件夹/内容/发送项目target =ifrmFolderContent>
Gesendet /发送物品
< / a>
< / li>
< li>
档案/存档
< / li>
< li>
Papierkorb / Trash
< / li>
< li>
垃圾/垃圾
< / li>
< li>
骗局
< / li>
< li>
垃圾邮件
< / li>
< li>
病毒
< / li>
< li>
阿布鲁芬/ Send&收到
< / li>
< li>
Verfassen /撰写
< / li>
< li>
Adressbuch /地址簿
< / li>
< / ul>
< / div>
$ b< div style =width：400px; height：300px; background-color：Green; display：block; float：left; margin： 0px; padding：0px;>
文件夹内容
< / iframe>
电子邮件内容
< / iframe>
< / div>
$ b< div style =background-color：Indigo; padding-top：2mm; padding-bottom：2mm; clear：left;>
版权所有
< / div>
< / div>
< / body>
< / html>
完全按照人们的预期呈现（Chrome + IE8）。
但现在，我补充说：
<！DOCTYPE html>
最重要。
和突然间，我在Chrome和IE8中都没有检测到FireFox中两个 iframe s（文件夹内容/电子邮件内容）之间2到5毫米的绿色空间。
更令人不安的是，似乎没有办法摆脱这个空间（除去删除<！DOCTYPE html> 。
为什么？我的意思是，绿色来自父元素的 background-color ，但为什么在元素两个 iframe s？
$ b
< style> iframe {vertical-align：bottom;}< / style>
或
< style> iframe {display：block; }< / style>
<！DOCTYPE html> 将浏览器置入标准模式，其中内联元素放置在包含块的基线上，字符下移区的空间始终分配在行框中。在其他模式下，只有存在在iframe的同一行上可打印的字符，在这里不是这种情况。移动ifr通过上述两种方法中的任何一种方法都可以让底线的空间位于iframe的高度。
Question:
Consider the following 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>
It renders exactly as one would expect (Chrome + IE8).
But now, I add:
<!DOCTYPE html>
on top of it.
And suddenly, I get 2 to 5 mm of green space between the two iframes (folder content / email content), in both Chrome and IE8 (haven't tested FireFox).
What is even more disturbing, there seems to be no way to get rid of this space (except from removing <!DOCTYPE html>.
Why? I mean, the green comes from the background-color of the parent element, but why is there some space between the two iframes ?
Just add
<style>iframe { vertical-align:bottom; } </style>
or
<style>iframe { display:block; } </style>
<!DOCTYPE html> puts the browser into standards mode, where inline elements are placed on the baseline of the containing block and a space for the character descenders is always allocated in the line box. In other modes, that space is only created when there are printable characters on the same line as the iframes which isn't the case here. Moving the iframe off the baseline by either of the methods above allows the space for the descenders to be placed within the height of the iframe.
这篇关于HTML：iframe元素之间的奇怪空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
