HTML: iframe elemanları arasında garip boşluk?

Soru:HTML: iframe elemanları arasında garip boşluk?

aşağıdaki HTML düşünün: bir (Krom + IE8) beklediğiniz gibi

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

Tam vermektedir.

Ama şimdi ekleyin:

<!DOCTYPE html>

bunun üstüne.

Aniden, hem Chrome hem de IE8'de (FireFox'u test etmemiş) iki iframe s (klasör içeriği/e-posta içeriği) arasında 2 ila 5 mm yeşil alan elde ediyorum. daha da rahatsız edici nedir , orada? Yani, yeşil ana elemanın background-color geliyor Neden. <!DOCTYPE html> kaldırmasını hariç (bu boşluk kurtulmak için hiçbir şekilde olmak

görünüyor, ama neden orada bazı olduğunu iki iframe s arasındaki boşluk?

kaynak

2011-09-02 Stefan Steiger

Hemen eklemek

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

veya

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

<!DOCTYPE html>, tarayıcıyı, satır içi öğelerin içerdiği satırın taban çizgisi üzerine yerleştirildiği ve karakter inişlerinin her zaman satır kutusuna tahsis edildiği standart modlarına yerleştirir. Diğer modlarda, bu alan sadece burada olmayan iframe'ler ile aynı satırda yazdırılabilir karakterler olduğunda oluşturulur. Iframe'i yukarıdaki yöntemlerden herhangi biri ile taban çizgisinden çıkarmak, iniciler için yerlerin iframe yüksekliğine yerleştirilmesine izin verir.

kaynak

2011-09-02 23:56:45 Alohci

Bana bunu yap :) – robertc

Şimdi bana daha zor bir soru cevapla: _Why_ iframe 'display: inline' varsayılan olarak mı? – PaulSkinner

Standartlar modunda bir iframe, varsayılan olarak display: inline şeklindedir. Bu, metin taban çizgisine yerleştirilecekleri anlamına gelir, yani. “a” nın dibinde biter, “y” ın dibinde değil. Gördüğünüz boşluk, metin satırındaki inişçilerin yeridir. Bu kaldırmanız gerekir:

iframe { display: block; }

kaynak

2011-09-02 23:57:54 robertc

(IE üzerinde bu sorunu yaşıyor Çünkü) HTML 5. http://www.quackit.com/html_5/tags/html_iframe_tag.cfm

kaynak

2011-09-02 23:58:47 GolezTrol

Aynı sorunu yaşıyorsanız, '' '' '' '' özniteliği benim için bir şeyi değiştirmiyor gibi görünmüyor. Sadece başkalarının bilmesini sağlamak, asla bilmez. –

Sadece hızlı bir not tanıtıldı seamless niteliğini belirtin ...

çalışılıyor ayarı: Bu çalıştı

font-size: 0px;

(birisi önerildiği gibi, iframe'lerin metin taban çizgisinin üzerine yerlerdir, çünkü inanıyorum).

Goodluck her'all!

kaynak

2014-02-04 11:51:22 User2

Bu, daha fazla desteklenmeli. Dikey hizalama yapmak için buna ihtiyacınız var: IE'de çalışmak için alt. – fanfavorite

HTML: iframe elemanları arasında garip boşluk?

cevap

İlgili konular