आईई 6 लेआउट मुद्दा - पूर्ण स्थिति

निम्न HTML फ़ायरफ़ॉक्स 2 & 3 और IE7 में आवश्यकतानुसार दिखता है। Left बटन बाईं ओर है, Right बटन दाईं ओर है, और बीच में पाठ है ... बीच में!आईई 6 लेआउट मुद्दा - पूर्ण स्थिति

IE6 पर हालांकि Left बटन गलत संरेखित है - यह केंद्र गठबंधन प्रकट होता है।

क्या कोई सुझाव दे सकता है ??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     DIV#Footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
     } 
     DIV#Footer INPUT 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0px; 
     } 
     DIV#Footer INPUT.right 
     { 
      right: 0px; 
     } 
     DIV#Footer INPUT.left 
     { 
      left: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div id="Footer"> 
     <input class="left" type="button" value="Left" /> 
     Some text in the middle 
     <input class="right" type="button" value="Right" /> 
    </div> 
</body> 
</html>

(मैं IE डेवलपर उपकरण का उपयोग किया गया है की कोशिश करने और विश्लेषण करने और इसे ठीक करने, कोई लाभ नहीं हुआ ...)

स्रोत

2009-02-11 Richard Everett

आप hasLayout संपत्ति को गति प्रदान करना होगा (एक IE बात ...) #footer की। चौड़ाई और ऊंचाई इसे ट्रिगर करती है, यदि आप चौड़ाई या ऊंचाई सेट नहीं करना चाहते हैं, तो आप सीएसएस में IE-only zoom प्रॉपर्टी का उपयोग कर सकते हैं।

<!DOCTYPE html> 
<html> 
<head> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     div#footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
      zoom: 1; 
     } 
     div#footer input 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0; 
     } 
     div#footer input.right 
     { 
      right: 0; 
     } 
     div#footer input.left 
     { 
      left: 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="footer"> 
     <input class="left" type="button" value="Left"> 
     Some text in the middle 
     <input class="right" type="button" value="Right"> 
    </div> 
</body> 
</html>

IIRC, IE में, तत्वों दो अलग अलग लेआउट व्यवहार, एक अगर hasLayout है true है, और एक अन्य अगर यह false है। यह सुनिश्चित करना कि यह true पर सेट है, इस तरह के बहुत सारे अजीब लेआउट मुद्दों को ठीक कर सकता है।

स्रोत

2009-02-11 17:24:35 nlogax

यह काफी विपरीत है! धन्यवाद जोनास। यह लगभग पूरी तरह से काम करता है - ऐसा लगता है कि आईई 6 में कुछ पिक्सेल द्वारा मेरे युक्त div की चौड़ाई को धक्का देना प्रतीत होता है। –

ज़ूम सेट करने से कर्सर बदल जाएगा। शायद मैं नियम के लिए _ को प्रीपेड करके आईई 6 तक सीमित करना चाहता हूं। –

मुझे कोई कर्सर बदलने की समस्या नहीं दिखती है Bjorn –

आपका जारी/तैनात तत्वों सामान्य रूप से गठबंधन पाठ से पहले क्रम में पहले होना चाहिए। उन्हें दिखाई देने के क्रम में उन्हें स्थिति में न रखें।

इसके अलावा, आप पूर्वता बढ़ाने के लिए और माइक्रोसॉफ्ट के IE डेवलपर टूलबार का उपयोग देखने के लिए जिन नियमों को प्रभाव ले जा रहे हैं के लिए एक जोड़ने के लिए चाहते हो सकता है! महत्वपूर्ण। मूल तत्व की चौड़ाई क्या है?

ऐसा लगता है कि यह सिर्फ काम करना चाहिए।

स्रोत

2009-02-11 17:13:00

धन्यवाद, लेकिन यह चीजों को बदलने के लिए प्रतीत नहीं होता है। स्क्रीन रीडर का उपयोग कर उपयोगकर्ताओं के लिए यह गड़बड़ चीजें भी होगी। –

इस (इनलाइन शैली माफ!) प्रयास करें

<div id="Footer"> 
    <div style="width:100%"> 
    <input class="left" type="button" value="Left" /> 
    Some text in the middle 
    <input class="right" type="button" value="Right" /> 
    </div> 
    </div>

स्रोत

2009-02-11 17:14:36 AJM

बहुत बढ़िया - धन्यवाद AJM! हालांकि, आईई 6 में अब बाएं बटन के बाईं ओर और पाद लेख के किनारे के बीच 20px अंतर है ... –

मैं अपने दृष्टिकोण के लिए एक मौका का एक सा सुझाव है और अगर आप इस के साथ किसी भी भाग्य को देखने के लिए जा रहा हूँ: HTML

<div id="Footer"> 
    <input class="right" type="button" value="Right" /> 
    <input class="left" type="button" value="Left" /> 
    <div class="center">Some text in the middle</div> 
</div>

फिर आप के लिए होता है में फिर

<style type="text/css"> 
    DIV#Footer 
    { 
     padding: 10px; 
     color: #fff; 
     background-color: #484848; 
     position: relative; 
     text-align: center; 
    } 
    DIV#Footer INPUT 
    { 
     margin: 5px 15px; 
     position: absolute; 
     top: 0px; 
    } 
    DIV#Footer INPUT.right 
    { 
     float: right; 
    } 
    DIV#Footer INPUT.left 
    { 
     float: left; 
    } 
    #Footer .center { 
     float: left; 
    } 

</style>

आगे बढ़ने के लिए और उन्हें कुछ मार्जिन दें ताकि आप उन्हें कैसे बना सकें। यह तरल लेआउट के लिए काम नहीं करेगा, जब तक कि आप इन मदों के लिए फूटर के भीतर पाद लेख या कंटेनर को एक निश्चित चौड़ाई नहीं देते।

स्रोत

2009-02-12 01:26:53 Matt

यह बिल्कुल काम नहीं कर रहा है मैट डर रहा हूँ ... –

जैसा कि जोनास ने कहा।

जब भी संदेह में, मैं स्पष्ट रूप से एक चौड़ाई निर्दिष्ट करने के लिए, भले ही आवश्यक नहीं की सलाह देते हैं, और मैं उपयोग करने के लिए "ज़ूम" से अधिक है कि के बाद से ज़ूम लेआउट मुद्दे को ठीक करने के लिए नहीं बनाया गया था पसंद करते हैं। चौड़ाई को स्पष्ट रूप से सेट करना हमेशा संभव नहीं होता है इसलिए "ज़ूम" चाल करता है।

स्रोत

2009-02-12 23:19:51

एक अन्य विकल्प मैंने पाया मुझे IE6 में पूरी तरह से तैनात div टैग के साथ सौदा करने के लिए काम किया सीएसएस में दोनों को छोड़ दिया और सही मान जोड़ने के लिए है।

यह सरल गणित है कि अगर आप divs आप के साथ काम कर रहे हैं की चौड़ाई पता है।

जगह में डिव बॉक्स "स्टेपल" लगता है।

मैंने अपने द्वारा पढ़े गए सभी अन्य सुझावों का प्रयास किया है (जावास्क्रिप्ट समेत यानी 6 यानी 8 यानी 8 के व्यवहार के लिए जावास्क्रिप्ट सहित) लेकिन वे काम नहीं कर पाए।

उपर्युक्त समाधान किया गया।

शुभकामनाएं!

स्रोत

2010-02-09 20:54:53

आईई 6 लेआउट मुद्दा - पूर्ण स्थिति

उत्तर

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