题:
考虑以下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> ;. 为什么?我的意思是,绿色来自父元素的背景颜色,但为什么两个iframe之间有空格?
解决方法
只是添加
<style>iframe { vertical-align:bottom; } </style>
要么
<style>iframe { display:block; } </style>
<!DOCTYPE html>将浏览器置于标准模式,其中内联元素放置在包含块的基线上,并且字符下降符的空间总是在行框中分配。在其他模式下,只有在与iframe位于同一行上的可打印字符时才会创建该空格。通过以上任一方法将iframe移动到基线之外,可以将下降的空间放置在iframe的高度内。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。