आईई 8 और 9 div चौड़ाई को अनदेखा कर रहा है - इस उदाहरण को काम करने के लिए कैसे प्राप्त करें?

निम्नलिखित html पृष्ठ किसी भी ब्राउज़र में ठीक से प्रस्तुत करना लगता है, लेकिन आईई 8 & 9:आईई 8 और 9 div चौड़ाई को अनदेखा कर रहा है - इस उदाहरण को काम करने के लिए कैसे प्राप्त करें?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
</head> 
<body> 
    <div style="width: 300px"> 

     <span style="white-space: nowrap;"> 
      <input type="radio" value="1" name="test" />Choice 1 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="2" name="test" />Choice 2 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="3" name="test" />Choice 3 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="4" name="test" />Choice 4 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="5" name="test" />Choice 5 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="6" name="test" />Choice 6 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="7" name="test" />Choice 7 
     </span> 

    </div> 
</body> 
</html>

एचटीएमएल काफी सीधे आगे लगता है, लेकिन आईई 8 & 9 div पर चौड़ाई ध्यान न दें और पर सभी विकल्प के लिए मजबूर एक ही पंक्ति (आईई 7 और अन्य सभी गैर-आईई ब्राउज़र 300px पर लपेटें क्योंकि उन्हें चाहिए)। किसी भी तरह से रेडियो को इसी विकल्प से अलग नहीं करते हुए निर्दिष्ट चौड़ाई पर लपेटने के लिए इस रेडियो बटन सूची की आवश्यकता होती है।

मैं आईई 8 & 9 प्राप्त कर सकता हूं अगर मैं डॉक्टरेट बदलता हूं, हालांकि मैं संभव होने पर इसे बदलने से बचना चाहता हूं।

यदि मैं स्पैन टैग के स्थान पर पुराने स्कूल "नोबर" टैग का उपयोग करता हूं तो मुझे वही व्यवहार मिलता है।

स्रोत

2012-06-07 Troy

एक 'प्रदर्शन जोड़ने करता है: इनलाइन-ब्लॉक;' शैली करने के लिए अपने div मदद? –

आप हमेशा फ्लोट जोड़ सकते हैं: बाएं; साफ़: दोनों; स्पैन – Rooster

आप रखना चाहिए ";" <div style="width: 300px;"> (अच्छा अभ्यास)

उपयोग display: inline-block में; white-space: nowrap;

स्रोत

2012-06-07 17:16:00

अंतिम शैली; 'शैली की घोषणा में और सीएसएस ब्लॉक में वैकल्पिक है। – Knyri

त्वरित प्रतिक्रिया के लिए धन्यवाद। "प्रदर्शन: इनलाइन-ब्लॉक" चाल चल रही थी। हालांकि, इनलाइन शैली के अंत में अर्धविराम की आवश्यकता नहीं होनी चाहिए, लेकिन वैसे भी ऐसा करने के लिए शायद यह क्लीनर है। – Troy

@Mayankswami आपको अपना पहला बयान अपडेट करना चाहिए। यह सच नहीं है कि आईई 8 और 9 समापन अर्ध-कॉलन की अनुपस्थिति में इनलाइन स्टाइल घोषणा को अनदेखा करते हैं। – Sampson

की समस्या यह समस्या आपके मार्कअप में मौजूद टैब और न्यूलाइन के साथ है। आप आईई से इन पर लपेटने के लिए नहीं कह रहे हैं, फिर भी एक ही समय में प्रत्येक तत्व को पैरेंट कंटेनर में साइड-साइड बैठने के लिए पर्याप्त संकीर्ण रहने के लिए कहा जाता है।

आप ध्यान दें देंगे कि यदि आप सफेद-अंतरिक्ष निकालने के लिए, सभी ब्राउज़रों मार्कअप एक ही प्रस्तुत करना:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     div { 
     width: 300px; 
     border: 1px solid #333 
     } 
     span { 
     border: 1px solid red; 
     white-space: nowrap 
     } 
    </style> 
    </head> 
    <body> 
    <div> 
     <span><input type="radio" value="1" name="test" /> Choice 1</span> 
     <span><input type="radio" value="2" name="test" /> Choice 2</span> 
     <span><input type="radio" value="3" name="test" /> Choice 3</span> 
     <span><input type="radio" value="4" name="test" /> Choice 4</span> 
     <span><input type="radio" value="5" name="test" /> Choice 5</span> 
     <span><input type="radio" value="6" name="test" /> Choice 6</span> 
     <span><input type="radio" value="7" name="test" /> Choice 7</span> 
    </div> 
    </body> 
</html>

enter image description here

स्रोत

2012-06-07 17:59:08 Sampson

प्रतिक्रिया के लिए धन्यवाद। हालांकि, सवाल यह नहीं था कि आईई को इसे सही तरीके से प्रस्तुत करने के लिए कैसे किया जाए, सवाल यह था कि आईई को इसे सही तरीके से प्रस्तुत करने के लिए कैसे प्राप्त करें ** मूल पोस्ट ** में कार्यप्रणाली के साथ, जो आपके उदाहरण में नहीं है। "डिस्प्ले: इनलाइन-ब्लॉक", मायांक द्वारा सुझाया गया, आपके डॉक्टरेट और मूल सिद्धांत दोनों के साथ काम करता है। – Troy

@TroyEvans: जब मैंने जोनाथन के पोस्ट किए गए एचटीएमएल का परीक्षण किया, तो अपने डॉकटाइप ' 'यह अभी भी आईई में काम करता है। डेमो के लिए यहां देखें: http://jsfiddle.net/FranWahl/eHwm5/3/ – Nope

@TroyEvans Doctype बदलें; यह अभी भी आईई में काम करता है। आईई के लिए आपका निर्देश असंगत था - सिद्धांत यहां अप्रासंगिक है। – Sampson

आईई 8 और 9 div चौड़ाई को अनदेखा कर रहा है - इस उदाहरण को काम करने के लिए कैसे प्राप्त करें?

उत्तर

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