यह div/img IE8 में क्यों नहीं होगा?

मेरे पास एक बहुत ही सरल होल्डिंग पेज है जिसे मैंने एक div, एंकर और छवि को केंद्रित किया है। किसी कारण से यह IE8 (या तो मोड) में केंद्रित नहीं होगा, और मुझे उम्मीद है कि कोई मुझे बता सकता है क्यों। मुझे अन्य आईई ब्राउज़र में इसे आजमाने का मौका नहीं मिला है। मैंने क्रोम और एफएफ 3 में यह कोशिश की है जहां यह ठीक काम करता है।यह div/img IE8 में क्यों नहीं होगा?

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #pageContainer {width:300px;margin:0 auto;text-align:center;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

मैंने कहा कि यह वास्तव में सरल था। :)

धन्यवाद,

ब्रेट

स्रोत

2009-05-03 Brettski

वैसे भी यह आईई संस्करण के साथ कोई संबंध नहीं है। यह सब IE-s – DaDa

में एक ही काम करता है इसके बेहतर doctype का उपयोग करने, कीड़े के आधे – Mike

तुम सच में अपने पृष्ठ quirks मोड में काम करना चाहते हैं?आपका HTML ठीक केन्द्रों एक बार मैं मानकों मोड के लिए मजबूर करने के लिए डॉक प्रकार कहा:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 
<title>Welcome</title> 
<style>  
    #pageContainer {width:300px;margin:0 auto;text-align:center;}  
    #toLogo{border:none; } 
</style> 
</head> 

<body> 

<div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"> 
    <img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div> 

</body> 
</html>

स्रोत

2009-05-03 05:16:09

buit-oxa, एक बहुत ही दिलचस्प जवाब वास्तव में। धन्यवाद। – Brettski

Doctype> quirks मोड, किसी भी दिन। Quirks मोड, ब्राउज़र को ब्राउज़र से अलग हो सकता है, जबकि मानकों मोड काफी है एक ही में कुछ मामूली अंतर को छोड़कर (हां, IE8 मानकों के अनुरूप!) है। +1 –

ईमानदारी से पहले कभी नहीं quirks मोड के बारे में सुना, उत्तर के लिए बहुत धन्यवाद और मुझे मेरे शिल्प बारे में थोड़ा और सिखाने के लिए। – Brettski

शरीर के लिए text-align:center जोड़ें। Div पर margin:0 auto के साथ संयुक्त होने पर ऐसा करना चाहिए।

आप एक पूर्ण-चौड़ाई कंटेनर & तो उस पर text-align:center स्थापित करने के साथ-साथ में पूरे पृष्ठ सामग्री लपेटकर द्वारा शरीर पर text-align:center का उपयोग किए बिना केंद्रित कर सकता है।

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #container {text-align:center;border:1px solid blue} 
    #pageContainer {width:300px; margin:0 auto; border:1px solid red} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
     </div> 
    </div> 
</body> 
</html>

(मैंने container div जोड़ा)। हालांकि यह वास्तव में कुछ भी नहीं बदलता है ... बस एक अतिरिक्त div। आपको अभी भी सभी सीएसएस गुणों की आवश्यकता है।

स्रोत

2009-05-03 04:52:33 Bryan

कि IE8 में केंद्र से किया था यह तय किया जाएगा, लेकिन मुझे समझ नहीं आता क्यों मुझे इसकी आवश्यकता है। मेरे पास अन्य साइटें हैं जो मार्जिन का उपयोग करती हैं: 0 ऑटो; एक युक्त div को केन्द्रित करने के लिए। – Brettski

पुराने धागा है, लेकिन I'mma अप इस जवाब (और भी आमतौर पर एक स्वीकार किए जाते हैं) क्योंकि यह विशेष रूप से इस सवाल का जवाब है कि मुझे याद दिलाया पाठ के अनुरूप डाल करने के लिए किया गया था: शरीर के लिए केंद्र। ;-) –

आप शायद निम्न के लिए इसे बदलना चाहते हैं:

<html> 
<head> 
<title>Welcome</title> 
<style> 
    body { text-align: center; } 
    #pageContainer {width:300px;margin:0 auto;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

text-align:center; शरीर के लिए ले जाया जाता है। यदि आप div #pageContainer के भीतर अन्य गठबंधन बाएं सामग्री को रखना चाहते हैं, तो आपको उस कक्षा के लिए text-align:left; की आवश्यकता होगी। यह वह समाधान है जिसे मैंने अभी कुछ वेबसाइटों में उपयोग किया है और सभी ब्राउज़रों में काम करना प्रतीत होता है (यह ड्रीमवेवर इसके स्टार्टर टेम्पलेट्स में उपयोग करता है)।

स्रोत

2009-05-03 04:56:50

मसीह जानता है क्यों किसी को आप के ख़िलाफ़ मतदान यह है के रूप में वास्तव में कैसे आप IE8 के रूप में एक पेज – wheresrhys

केंद्र वास्तव में इस स्तर पर मानकों के अनुरूप है, तो आप वास्तव में sepcification और मानकों को लागू कर सकते हैं। टेक्स्ट-एलाइन प्रॉपर्टी केवल इनलाइन-स्तरीय तत्वों को केंद्रित करती है, और डीआईवी के रूप में स्तर के स्तर को अवरुद्ध नहीं करती है। text-align: केंद्र; इस मामले में केवल शरीर के भीतर * पाठ * को केंद्रित करेगा, कंटेनर तत्व नहीं। उपर्युक्त उत्तर राज्यों के रूप में, केवल एक चीज की जरूरत है एक डॉक्टरेट है। –

div के किनारों पर auto के मार्जिन ब्राउज़र को इसे छोड़ तय करने के लिए जहां यह हो जाता है। ब्राउजर को यह बताने में कुछ भी नहीं है कि div शरीर में केंद्रित होना चाहिए, या बाएं या दाएं गठबंधन किया जाना चाहिए। तो यह ब्राउज़र पर निर्भर है। यदि आप शरीर को निर्देश जोड़ते हैं, तो आपकी समस्या हल हो जाएगी।

<html> 
    <head> 
    <title>Welcome</title> 
    <style> 
     body { text-align: center;} 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

मैंने div में 1px सीमा जोड़ा ताकि आप देख सकें कि और क्या स्पष्ट हो रहा था।

आप इसे ब्राउज़र करने के लिए जा रहे हैं क्योंकि यह quirks मोड में है। quirks मोड को निकालने के लिए, शीर्ष करने के लिए एक डॉक प्रकार परिभाषा जोड़ सकते हैं ताकि तरह:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <title>Welcome</title> 
    <style> 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

अब आप पृष्ठ पर अपने 300 पिक्सल div केंद्र देखने के लिए सक्षम हो जाएगा।

स्रोत

2009-05-03 05:02:24

एक सेट चौड़ाई के साथ संयुक्त स्वचालित क्षैतिज मार्जिन ब्लॉक स्तर तत्वों को केंद्र का सही तरीका है। आम बात है, यह अपने आप कोशिश :) –

खाका उपयोगकर्ताओं के लिए इसे मेरा पागल कर दिया, जब तक मैं इस पोस्ट पाया: एचटीएमएल कोड परिवर्तन आप में problem with ie8 and blueprint लंबी कहानी संक्षेप में,

<!--[if IE]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

के लिए

<!--[if lt IE 8]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

सादर एलेक्स

स्रोत

2009-09-11 23:24:26

-1

यह IE6,7,8, एफएफ 3.6.3 पर मेरे लिए काम करता है:

#container 
    { 
     width:100%; 
    } 

    #centered 
    { 
     width:350px; 
     margin:0 auto; 
    }

और

<div id="container"> 
     <div id="centered">content</div> 
    </div>

स्रोत

2010-04-06 16:16:19 ben

काम नहीं करता है ... – Philippe

यह div/img IE8 में क्यों नहीं होगा?

उत्तर

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