HTML: ¿Espacio extraño entre elementos de iframe?

Pregunta

Considere el siguiente 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>

Se procesa exactamente como cabría esperar (Chrome + IE8).

Pero ahora, agrego:

<!DOCTYPE html>

en lo alto de ello

Y de repente, obtengo de 2 a 5 mm de espacio verde entre las dosiframes (contenido de carpeta / contenido de correo electrónico), tanto en Chrome como en IE8 (no he probado FireFox). Lo que es aún más inquietante, parece que no hay forma de deshacerse de este espacio (excepto eliminar<!DOCTYPE html>.

¿Por qué? Quiero decir, el verde proviene de labackground-color del elemento padre, pero ¿por qué hay algo de espacio entre las dosiframes?

Respuestas a la pregunta(4)

Su respuesta a la pregunta