HTML: ¿espacio extraño entre elementos iframe?

Pregunta:HTML: ¿espacio extraño entre elementos iframe?

Considere el siguiente código 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 hace exactamente lo que uno esperaría (cromo + IE8).

Pero ahora, agrego:

<!DOCTYPE html>

en la parte superior de la misma.

Y de repente, obtengo de 2 a 5 mm de espacio verde entre los dos iframe s (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 preocupante, no parece haber ninguna manera de deshacerse de este espacio (excepto de la eliminación de <!DOCTYPE html>.

¿Por qué? Es decir, el verde proviene de la background-color del elemento padre, pero ¿por qué hay algunos el espacio entre las dos iframe s?

Fuente

2011-09-02 Stefan Steiger

Sólo tiene que añadir

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

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

<!DOCTYPE html> pone el navegador en modo estándar, donde los elementos en línea se colocan en la línea de base del bloque contenedor y siempre se asigna un espacio para los descendientes de caracteres en el cuadro de línea. En otros modos, ese espacio solo se crea cuando hay caracteres imprimibles en la misma línea que los iframes, que no es el caso aquí. Al mover el iframe fuera de la línea de base por cualquiera de los métodos anteriores, se permite colocar el descendente dentro del alto del iframe.

Fuente

2011-09-02 23:56:45 Alohci

Muéstremela :) – robertc

Ahora respóndame una pregunta mucho más difícil: _¿Por qué 'iframe' display: inline' por defecto? – PaulSkinner

Un iframe en modo estándar es display: inline de forma predeterminada. Eso significa que se colocarán en la línea de base del texto, es decir. donde termina la parte inferior de una 'a', no donde la parte inferior de una 'y' lo hace. La brecha que está viendo es el espacio para los descendientes en la línea de texto. Esto debe quitarlo:

iframe { display: block; }

Fuente

2011-09-02 23:57:54 robertc

especificar el atributo seamless, que se introduce en HTML 5. http://www.quackit.com/html_5/tags/html_iframe_tag.cfm

Fuente

2011-09-02 23:58:47 GolezTrol

Al tener el mismo problema, el atributo '' seamless'' no parece cambiar nada para mí. Solo para que los demás sepan, nunca sepan. –

Sólo una nota rápida (porque estaba teniendo este problema en IE) ...

tratando configuración:

font-size: 0px;

Esto funcionó (creo porque, como alguien sugirió, los marcos flotantes son lugares en la línea base del texto).

Goodluck y'all!

Fuente

2014-02-04 11:51:22 User2

Esto debería recibir más votos. Necesita esto para hacer vertical-align: bottom para trabajar en IE. – fanfavorite

HTML: ¿espacio extraño entre elementos iframe?

Respuesta

Cuestiones relacionadas