इनलाइन-ब्लॉक: फ़ायरफ़ॉक्स 4 बनाम आईई 9

मुझे उलझन में है कि क्यों IE9 आश्चर्यजनक तरीके से ऐसे मूल व्यवहार का अर्थ देता है। फ़ायरफ़ॉक्स 4 या क्रोम 11 में मैं देखता हूं कि divs पक्ष के साथ दिखाई देता है जैसा कि मैं उम्मीद करता हूं। आईई 9 में हालांकि, मैं एक दूसरे के नीचे दिखाई देने वाले divs देखता हूं।इनलाइन-ब्लॉक: फ़ायरफ़ॉक्स 4 बनाम आईई 9

<div style='border: black solid 1px'> 
    <div style='display: inline-block; width: 10em; height: 1em; background-color: red'> 
     block one 
    </div> 
    <div style='display: inline-block; width: 10em; height: 1em; background-color: green'> 
     block two 
    </div> 
</div>

मुझे विश्वास है कि आईई 9 मानकों का अनुपालन है, तो मुझे क्या याद आ रही है?

किसी भी मदद की सराहना की जाएगी!

अद्यतन: वाह, यह विचित्र है। मेरे पास पहले कोई डॉक्टरेट घोषणा नहीं थी। जिस पल में मैं पृष्ठ के शीर्ष पर <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> जोड़ता हूं, IE9 फ़ायरफ़ॉक्स और क्रोम की तरह ठीक काम करता है। कोई विचार क्या यह पहले जा रहा था?

स्रोत

2011-03-30 Alexandre

कैसे विस्तृत अपने कंटेनर 'div' है का इस्तेमाल किया था? – alex

हो सकता है कि आपने यह http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie – sandeep

जांचें, इस उदाहरण के लिए, जब तक शीर्ष div 20em से बड़ा हो, तो आप इसे देख सकते हैं अजीब असंगतता। – Alexandre

केवल एक चीज मैं के बारे में सोच सकते हैं कि IE9 संगतता दृश्य (IE7 के प्रतिपादन इंजन अगर मैं गलत नहीं कर रहा हूँ के समान) उपयोग कर रहा है अपने पेज रेंडर करने के लिए है । यदि आप संगतता दृश्य बंद करते हैं, तो आप देखेंगे कि बक्से क्षैतिज रूप से अपेक्षित रूप से ढेर हैं।

केवल IE8 और नए के पास display: inline-block के लिए पूर्ण समर्थन है। आईई 7 और पुराने इसे उन तत्वों पर लागू करते हैं जो डिफ़ॉल्ट रूप से इनलाइन हैं (जैसे span) और किसी अन्य तत्व (जैसे li या div) पर लागू नहीं हैं। नतीजतन, आपके ब्लॉक तत्व अभी भी ब्लॉक के रूप में प्रदर्शित होते हैं, इनलाइन ब्लॉक नहीं।

अद्यतन: वाह, यह विचित्र है। मेरे पास पहले कोई डॉक्टरेट घोषणा नहीं थी। जिस पल में मैं पृष्ठ के शीर्ष पर <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> जोड़ता हूं, IE9 फ़ायरफ़ॉक्स और क्रोम की तरह ठीक काम करता है। कोई विचार क्या यह पहले जा रहा था?

यह आसान है: आपके डॉक्टरेट घोषणा को जोड़ने से पहले, आईई 9 quirks mode में प्रतिपादन कर रहा था। क्विर्क मोड में, आईई display: inline-block का इलाज करता है जैसा कि पुराने संस्करणों में किया गया था, जैसा कि मैंने उपर्युक्त पैराग्राफ में बताया है। एक डॉक्टरेट घोषणा करके, आईई 9 मानकों के मोड में प्रस्तुत करेगा, आपकी शैलियों को अपेक्षित रूप से प्रस्तुत करेगा।

स्रोत

2011-03-30 07:45:19 BoltClock

प्रयास करें यह काम करता है निम्नलिखित ...

<div style='border: black solid 1px;display:inline'> 
    <div style='display: inline; width: 10em; height: 1em; background-color: red'> 
     block one 
    </div> 
    <div style='display: inline; width: 10em; height: 1em; background-color: green'> 
     block two 
    </div> 
</div>

स्रोत

2011-03-30 06:41:25 Jitesh

आपकी मदद के लिए धन्यवाद। हालांकि मेरा प्रश्न इनलाइन-ब्लॉक से अधिक संबंधित था। मुझे समझ में नहीं आया कि क्यों IE9 आंतरिक divs को दूसरे के नीचे रखने का फैसला करेगा।मैंने सोचा कि * इनलाइन * -ब्लॉक का मूल प्रभाव यह था कि ब्लॉक को एक नई लाइन के बिना दूसरे के बगल में रखा जाएगा। – Alexandre

हां, आईई 9 के साथ कुछ समस्याएं हैं और डिस्प्ले: इनलाइन-ब्लॉक। बोल्टक्लॉक की व्याख्या के रूप में इसे संगतता लेबेल से बचा जा सकता है। प्रदर्शन के बजाय छोड़ दिया: इनलाइन-ब्लॉक

<div style='border: black solid 1px'> 
     <div style='float:left; width: 10em; height: 1em; background-color: red'> 
      block one 
     </div> 
     <div style='float:left; width: 10em; height: 1em; background-color: green'> 
      block two 
     </div> 
    </div>

आप Div side by side in one line के बारे में अधिक प्राप्त कर सकते हैं मेरी सलाह नाव का प्रयोग है।

स्रोत

2012-10-17 13:56:27 Markweb

यह DOCTYPE बिना इस्तेमाल करने के लिए (जोड़ने यह मेरे नियंत्रण में नहीं है) मैं निम्नलिखित सीएसएस

<style type="text/css"> 
     #myulid li{ 
      display: inline-block; 
      width: 100px; 
      margin: 10; 
      text-align:center; 
      vertical-align: top; 
     } 
    </style> 

    <!--[if IE]> 
    <style type="text/css"> 
     /* css for IE */ 
     #myulid{ 
      display: block; 
     } 
     #myulid li{ 
      display: inline; 
     } 
    </style> 
    <![endif]-->

स्रोत

2013-04-26 23:02:54 sreek

इनलाइन-ब्लॉक: फ़ायरफ़ॉक्स 4 बनाम आईई 9

उत्तर

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