एचटीएमएल: iframe तत्वों के बीच अजीब जगह?

प्रश्न:एचटीएमएल: 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>

यह बिल्कुल renders के रूप में एक उम्मीद होती है (क्रोम + IE8)।

लेकिन अब, मैं जोड़ें:

<!DOCTYPE html>

यह की चोटी पर।

और अचानक, मुझे क्रोम और आईई 8 (फ़ायरफ़ॉक्स का परीक्षण नहीं किया गया है) में दो iframe एस (फ़ोल्डर सामग्री/ईमेल सामग्री) के बीच 2 से 5 मिमी हरी जगह मिलती है। क्या और भी अधिक परेशान करने वाला है, इस अंतरिक्ष से छुटकारा पाने के (<!DOCTYPE html> हटाने से सिवाय कोई रास्ता नहीं हो रहा है।

क्यों? मेरा मतलब है, हरे रंग की पेरेंट तत्व की background-color से आता है, लेकिन क्यों वहाँ कुछ है दो iframe रों के बीच की जगह?

स्रोत

2011-09-02 Stefan Steiger

बस जोड़ने

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

या

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

<!DOCTYPE html> ब्राउज़र को मानक मोड में डालता है, जहां इनलाइन तत्वों को युक्त ब्लॉक की आधार रेखा पर रखा जाता है और चरित्र अवरोधकों के लिए एक स्थान हमेशा लाइन बॉक्स में आवंटित किया जाता है। अन्य तरीकों से, वह स्थान केवल तब बनाया जाता है जब उसी पंक्ति पर प्रिंट करने योग्य वर्ण होते हैं जैसे iframes जो यहां नहीं है। ऊपर दिए गए तरीकों से आधार रेखा से आईफ्रेम को स्थानांतरित करने से अवरोधकों को आईफ्रेम की ऊंचाई में रखा जा सकता है।

स्रोत

2011-09-02 23:56:45 Alohci

मुझे इसे मारो :) – robertc

अब मुझे एक बहुत कठिन सवाल का जवाब दें: _Why_ iframe 'display: inline' डिफ़ॉल्ट रूप से है? – PaulSkinner

मानक मोड में iframe डिफ़ॉल्ट रूप से display: inline है। इसका मतलब है कि उन्हें टेक्स्ट बेसलाइन पर रखा जाएगा, यानी। जहां 'ए' के नीचे समाप्त होता है, जहां '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

एक ही समस्या होने के कारण, '' निर्बाध 'विशेषता मेरे लिए एक चीज़ नहीं बदलती प्रतीत होती है। बस दूसरों को बताने के लिए, कभी नहीं पता। –

बस एक क्विक नोट पेश किया जाता है (क्योंकि मैं IE पर इस समस्या हो रही थी) ...

सेटिंग की कोशिश कर रहा है:

font-size: 0px;

यह काम करता है (मुझे विश्वास है क्योंकि, जैसा कि किसी ने सुझाव दिया है, iframes टेक्स्ट बेसलाइन पर स्थान हैं)।

गुडलक आप सब!

स्रोत

2014-02-04 11:51:22 User2

इसे और अधिक उठाया जाना चाहिए। आपको लंबवत-संरेखण करने के लिए इसकी आवश्यकता है: आईई में काम करने के लिए नीचे। – fanfavorite

एचटीएमएल: iframe तत्वों के बीच अजीब जगह?

उत्तर

संबंधित मुद्दे