HTML：iframe元素之間的奇怪空間？

考慮下面的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中都沒有測試FireFox，在兩個iframe s（文件夾內容/電子郵件內容）之間得到2到5毫米的綠色空間。什麼是更令人不安的是，似乎沒有辦法擺脫這種空間的（除了刪除<!DOCTYPE html>。

爲什麼呢？我的意思是，綠色來自於父元素的background-color，但爲什麼會出現一些

來源

2011-09-02 Stefan Steiger

兩個iframe S之間的空間嗎？只需添加

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

或

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

<!DOCTYPE html>將瀏覽器置於標準模式，其中內聯元素放置在包含塊的基線上，字符下移區的空間始終分配在行框中。在其他模式下，只有在iframe中有可打印的字符時，纔會創建該空間。通過上述任一方法將iframe從基線移開，都可以將下行空間放置在iframe的高度內。

來源

2011-09-02 23:56:45 Alohci

打我吧:) – robertc

現在回答我一個更難的問題：_Why_默認情況下是iframe display：inline嗎？ – PaulSkinner

標準模式下的iframe默認爲display: inline。這意味着他們將被放置在文本基線上，即。 'a'的底部結束，而不是'y'的底部所在的位置。你看到的差距是文本行中下行的空間。這應該將其刪除：

iframe { display: block; }

來源

2011-09-02 23:57:54 robertc

指定seamless屬性，這是在HTML 5推出http://www.quackit.com/html_5/tags/html_iframe_tag.cfm

來源

2011-09-02 23:58:47 GolezTrol

也有同樣的問題，''seamless''屬性對我來說似乎沒有改變。只是爲了讓別人知道，永遠不會知道。 –

只是一個快速的說明（因爲我正在對IE這個問題）...

嘗試設置：

font-size: 0px;

這工作（我相信因爲，如有人建議，iframes是在文本基線上的地方）。

Goodluck你好！

來源

2014-02-04 11:51:22 User2

這應該得到更多的投票。您需要使用垂直對齊：底部才能在IE中工作。 – fanfavorite

HTML：iframe元素之間的奇怪空間？

回答

相關問題