题:
请考虑以下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在Chrome和IE8(未测试FireFox)的两个s(文件夹内容/电子邮件内容)之间获得了2到5毫米的绿色空间.更令人不安的是,似乎没有办法摆脱这个空间(除了移除<!DOCTYPE html>.
为什么？我的意思是,绿色来自background-color父元素,但为什么两者之间有一些空间iframe呢？
Alo*_*hci 46
只需添加
<style>iframe { vertical-align:bottom; } </style>
要么
<style>iframe { display:block; } </style>
<!DOCTYPE html>将浏览器置于标准模式,其中内联元素放置在包含块的基线上,字符下延器的空间始终在行框中分配.在其他模式中,仅当与iframe在同一行上存在可打印字符时才会创建该空间,而在此处不是这种情况.通过上述任一方法将iframe移离基线,允许将下行空间放置在iframe的高度内.
rob*_*rtc 17
一个iframe在标准模式是display: inline默认.这意味着它们将被放置在文本基线上,即.'a'的底部结束的地方,而不是'y'底部的底部.你看到的差距是文本行中下行空间.这应该删除它:
iframe { display: block; }
| 归档时间： |
|
| 查看次数： |
14884 次 |
| 最近记录： |