HTML：iframe要素間の奇妙なスペース？

は、次のHTMLを考えてみましょう：1は（クローム+ IE8を）期待通り

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

それは正確にレンダリングします。

しかし、今、私は追加します。その上に

<!DOCTYPE html>

を。

突然、私はChromeとIE8の両方（FireFoxをテストしていない）の2つの間に緑色のスペースが2つあります（フォルダの内容/電子メールの内容）。 <!DOCTYPE html>の除去から除いて（このスペースを取り除くする方法がないように思われるが、さらに多くの不安は何ですか。

グリーンは親要素のbackground-colorから来ているが、なぜいくつかがあるのはなぜ？私が意味します、 2つのiframe sの間のスペース？

出典

2011-09-02 Stefan Steiger

だけ追加

<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

は（私はIEでこの問題を抱えていたので）HTML 5にhttp://www.quackit.com/html_5/tags/html_iframe_tag.cfm

出典

2011-09-02 23:58:47 GolezTrol

同じ問題があるので、 '' seamless''属性は私のために何かを変えないようです。ただ他の人に知らせるために、決して知らない。 –

だけで簡単にメモして導入されたseamless属性を指定します...

しようと設定：これは働いていた

font-size: 0px;

（誰かが示唆したように、アイフレームは、テキストのベースライン上の場所である、ので、私は信じています）。

Goodluck y'all！

出典

2014-02-04 11:51:22 User2

これはもっと優先されるべきです。 IEで垂直方向に整列するにはbottomが必要です。 – fanfavorite

HTML：iframe要素間の奇妙なスペース？

答えて

関連する問題