可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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 ?

回答1:

Just add

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

<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.

回答2:

An iframe in standards mode is display: inline by default. That means they will be placed on the text baseline, ie. where the bottom of an 'a' ends, not where the bottom of a 'y' does. The gap you're seeing is the space for descenders in the line of text. This should remove it: