HTML: iframe元素之间奇怪的空格？
HTML: iframe元素之间奇怪的空格？
提问于 2011-09-03 07:46:58
问题：
考虑以下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)的两个iframe(文件夹内容/电子邮件内容)之间获得了2到5毫米的绿色空间。更令人不安的是，似乎没有办法摆脱这个空间(除了删除<!DOCTYPE html>。
为什么？我的意思是，绿色来自父元素的background-color，但是为什么两个iframe之间有一些空格呢？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-09-03 07:56:45
只需添加
<style>iframe { vertical-align:bottom; } </style>或
<style>iframe { display:block; } </style><!DOCTYPE html>将浏览器置于标准模式，其中内联元素被放置在包含块的基线上，并且始终在行框中分配用于字符降序的空间。在其他模式中，只有在与iframe相同的行上有可打印字符时，才会创建空格，但这里不是这种情况。通过上面的任一方法将iframe移出基线，可以将下行程序的空间放置在iframe的高度内。
Stack Overflow用户
发布于 2011-09-03 07:57:55
默认情况下，标准模式下的iframe为display: inline。这意味着它们将被放置在文本基线上，即。'a‘的结尾，而不是'y’的结尾。您看到的间隙是文本行中的下降者的空间。这应该会将其删除：
iframe { display: block; }Stack Overflow用户
发布于 2014-02-04 19:51:23
简单说明一下(因为我在IE上遇到了这个问题)……
正在尝试设置：
font-size: 0px;这是可行的(我相信这是因为，正如有人建议的那样，iframe是文本基线上的位置)。
祝你们好运！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7290214
复制相关文章
相似问题