HTML: Espace étrange entre les éléments iframe?

Question:

Considérer le code HTML suivant:

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

Il rend exactement comme on pouvait s'y attendre (Chrome + IE8).

Mais maintenant, j'ajoute:

<!DOCTYPE html>

sur le dessus de cela.

Et tout à coup, je reçois 2 à 5 mm d'espace vert entre les deux iframes (contenu du dossier /le contenu de l'email), en Chrome et IE8 ne l'ai pas testé FireFox).
Ce qui est encore plus inquiétant, il semble y avoir aucun moyen de se débarrasser de cet espace (à l'exception de la suppression de <!DOCTYPE html>.

Pourquoi? Je veux dire, le vert provient de la background-color de l'élément parent, mais pourquoi est-il un espace entre les deux iframes ?

source d'informationauteur Stefan Steiger

  1. 44

    Juste ajouter 

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

    ou

    <style>iframe { display:block; } </style>

    <!DOCTYPE html> met le navigateur en mode standard, où les éléments en ligne sont placés sur la ligne de base du bloc contenant et un espace pour le personnage jambages est toujours affecté dans la zone de ligne. Dans les autres modes, que l'espace n'est créé que lorsqu'il y a des caractères imprimables sur la même ligne que les iframes, ce qui n'est pas le cas ici. Déplacement de l'iframe hors de la base par l'une des méthodes ci-dessus permet l'espace pour les jambages pour être placé à l'intérieur de la hauteur de l'iframe.

  2. 16

    Un iframe en mode standard est display: inline par défaut. Cela signifie qu'ils seront placés sur la ligne de base du texte, c'est à dire. où le fond de l'un 'a', où le fond d'un " y " ne. L'écart que vous voyez est l'espace pour des prolongements de la ligne de texte. Cela devrait supprimer:

    iframe { display: block; }
  3. 2

    Juste une petite remarque (Parce que j'ai eu ce problème sur IE)...

    Essayer de réglage: 

    font-size: 0px;

    Cela a fonctionné (je crois parce que, comme quelqu'un l'a suggéré, les iframes sont des lieux sur la ligne de base du texte).

    Goodluck y'all!

  4. 1

    Spécifier le seamless attribut, qui est introduit dans le HTML 5. http://www.quackit.com/html_5/tags/html_iframe_tag.cfm