"मार्जिन: 0 ऑटो" का उपयोग करना इंटरनेट एक्सप्लोरर 8 में

Question 1

मैं कुछ अग्रिम IE8 परीक्षण करने की प्रक्रिया में हूं, और ऐसा लगता है कि margin: 0 auto;IE8 में सभी मामलों में उपयोग करने की पुरानी तकनीक काम नहीं करती है।

HTML का निम्नलिखित टुकड़ा FF3, ओपेरा, सफारी, क्रोम, IE7 और IE8 कंप्रेशर्स में एक केंद्रित बटन देता है, लेकिन IE8 मानक में नहीं :

<div style="height: 500px; width: 500px; background-color: Yellow;">
    <input type="submit" style="display: block; margin: 0 auto;" />
</div>

(काम के इर्द-गिर्द मैं बटन के लिए एक स्पष्ट चौड़ाई जोड़ सकता हूं)।

तो सवाल यह है: कौन से ब्राउज़र सही हैं? या यह उन मामलों में से एक है जहां व्यवहार अपरिभाषित है?

(मेरी सोच है कि है सब ब्राउज़र गलत हैं - बटन को "प्रदर्शन: ब्लॉक" होने पर 100% चौड़ाई नहीं होनी चाहिए?)

UPDATE: मैं दुत्कार रहा हूं। चूंकि इनपुट एक ब्लॉक-स्तरीय तत्व नहीं है, इसलिए मुझे इसे "टेक्स्ट-संरेखित: केंद्र" के साथ एक div के भीतर समाहित करना चाहिए। कहा जा रहा है कि, जिज्ञासा के लिए, मैं अभी भी जानना चाहूंगा कि बटन को ऊपर के उदाहरण में केंद्रित होना चाहिए या नहीं।

BOUNTY के लिए: मुझे पता है कि मैं उदाहरण में अजीब चीजें कर रहा हूं, और जैसा कि मैंने अपडेट में बताया है, मुझे बस इसे केंद्र में संरेखित करना चाहिए था। इनाम के लिए, मुझे लगता है कि जवाब देने के चश्मे के संदर्भ चाहते हैं:

यदि मैं "प्रदर्शन: ब्लॉक" सेट करता हूं, तो क्या बटन की चौड़ाई 100% होनी चाहिए? या यह अपरिभाषित है?
चूंकि डिस्प्ले ब्लॉक है, इसलिए "मार्जिन: 0 ऑटो;" बटन, या नहीं, या अपरिभाषित केंद्र?

Question 2

यह IE8 में एक बग है।

अपने दूसरे प्रश्न के साथ शुरू करें: "मार्जिन: 0 ऑटो" एक ब्लॉक को केंद्र में रखता है, लेकिन केवल तब जब ब्लॉक की चौड़ाई माता-पिता की चौड़ाई कम हो। आमतौर पर, वे समान होते हैं। इसीलिए नीचे दिए गए उदाहरण में पाठ केंद्रित नहीं है।

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

एक बार बी तत्व की प्रदर्शन शैली को ब्लॉक करने के लिए सेट किया जाता है, इसकी चौड़ाई माता-पिता की चौड़ाई में चूक जाती है। सीएसएस कल्पना 10.3.3 ब्लॉक-स्तर, सामान्य प्रवाह में गैर-प्रतिस्थापित तत्वों का वर्णन है कि कैसे: "यदि 'चौड़ाई' को 'ऑटो' पर सेट किया गया है, तो किसी भी अन्य 'ऑटो' मान '0' और 'चौड़ाई' परिणामी समानता से निम्नानुसार हैं। । " वहाँ वर्णित समानता है

'मार्जिन-लेफ्ट' + 'बॉर्डर-लेफ्ट-चौड़ाई' + 'पेडिंग-लेफ्ट' + 'चौड़ाई' + 'पेडिंग-राइट' + '' बॉर्डर-राइट-वाइड '' 'मार्जिन-राइट' = ब्लॉक वाली चौड़ाई

तो, आम तौर पर सभी ऑटोस परिणाम ब्लॉक की चौड़ाई में होते हैं, जिसमें ब्लॉक की चौड़ाई के बराबर होता है।

हालांकि, इस गणना को INPUT पर लागू नहीं किया जाना चाहिए, जो एक प्रतिस्थापित तत्व है। प्रतिस्थापित तत्वों को 10.3.4 ब्लॉक-स्तर द्वारा कवर किया जाता है, बदले हुए तत्वों को सामान्य प्रवाह में । पाठ में कहा गया है: "चौड़ाई का उपयोग किया गया मूल्य इनलाइन प्रतिस्थापित तत्वों के लिए निर्धारित किया गया है।" 10.3.2 इनलाइन, प्रतिस्थापित तत्वों का प्रासंगिक हिस्सा है: "यदि 'चौड़ाई' में 'ऑटो' का एक गणना मूल्य है, और तत्व में आंतरिक चौड़ाई है, तो यह आंतरिक चौड़ाई 'चौड़ाई' का उपयोग किया गया मूल्य है"।

मुझे लगता है कि सीएसएस के बारे में परवाह किए जाने वाला परिदृश्य IMG तत्व है। इस उदाहरण में Stackoverflow का लोगो सभी ब्राउज़रों द्वारा केंद्रित होगा।

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="">
</div>

INPUT तत्व को उसी तरह का व्यवहार करना चाहिए।

Question 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">मुद्दे को जोड़ना

Question 4

हां, आप कल्पना को सौ बार पढ़ सकते हैं, और विभिन्न बिट्स और टुकड़ों को जोड़ सकते हैं जब तक कि आपके पास एक व्याख्या न हो जो सही लगता है - लेकिन यह वास्तव में ब्राउज़र विक्रेताओं ने किया है और यही कारण है कि हम आज जिस स्थिति में हैं।

संक्षेप में, जब आप किसी तत्व में 100% की चौड़ाई लागू करते हैं, तो उसे माता-पिता की चौड़ाई के 100% तक बढ़ा देना चाहिए, यदि वह मूल तत्व है। आप इसे margin: 0 auto;तब से अब तक केंद्र में नहीं रख सकते क्योंकि यह पहले से ही उपलब्ध चौड़ाई का 100% लेता है।

margin: 0 auto;आपके साथ कुछ भी केंद्रित करने के लिए एक स्पष्ट चौड़ाई को परिभाषित करने की आवश्यकता है। इनलाइन तत्व को केंद्र में रखने के लिए, आप text-align: center;मूल तत्व पर उपयोग कर सकते हैं , हालाँकि यदि माता-पिता के अन्य बच्चे हैं तो इसके अवांछित दुष्प्रभाव हो सकते हैं।

Question 5

सीएसएस में फार्म नियंत्रण को प्रतिस्थापित तत्व हैं ।

10.3.4 ब्लॉक-स्तर, सामान्य प्रवाह में प्रतिस्थापित तत्वों

इनलाइन प्रतिस्थापित तत्वों के लिए 'चौड़ाई' का उपयोग किया गया मान निर्धारित किया जाता है । फिर मार्जिन को निर्धारित करने के लिए गैर-प्रतिस्थापित ब्लॉक-स्तरीय तत्वों के लिए नियम लागू किए जाते हैं।

इसलिए फॉर्म कंट्रोल को 100% चौड़ाई तक नहीं बढ़ाया जाना चाहिए ।

हालांकि, यह केंद्रित होना चाहिए। यह IE8 में एक साधारण बग की तरह दिखता है। यदि आप विशिष्ट चौड़ाई सेट करते हैं तो यह तत्व को केंद्र में रखता है:

<input type="submit" style="display: block; width:100px; margin: 0 auto;" />

Question 6

जैसा कि बूटी-ऑक्सा द्वारा समझाया गया है यह एक बग है जिसके साथ IE8 तत्वों को प्रतिस्थापित करता है। यदि आप अपने बटन में स्पष्ट चौड़ाई नहीं जोड़ना चाहते हैं तो आप इसे इनलाइन-ब्लॉक में बदल सकते हैं और केंद्र सामग्री को संरेखित कर सकते हैं:

<div style="height: 500px; width: 500px; background-color: Yellow; text-align: center;">
  <input type="submit" style="display: inline-block;" />
</div>

यदि आप मोज़िला (FF2 सहित) के पुराने संस्करणों में काम करना चाहते हैं जो इनलाइन-ब्लॉक का समर्थन नहीं करते हैं तो आप display: -moz-inline-stack;बटन को जोड़ सकते हैं ।

Question 7

जहां तक यह कल्पना के संबंध में एक "बग" है; यह नहीं है। पोस्ट प्रश्नों के लेखक के रूप में, इसके लिए व्यवहार "अपरिभाषित" होगा क्योंकि IE में यह व्यवहार केवल फॉर्म नियंत्रण पर होता है, जैसा कि कल्पना है:

CSS 2.1 परिभाषित नहीं करता है कि नियंत्रण और फ़्रेम बनाने के लिए कौन से गुण लागू होते हैं, या CSS का उपयोग उन्हें स्टाइल करने के लिए कैसे किया जा सकता है। उपयोगकर्ता एजेंट इन तत्वों के लिए सीएसएस गुण लागू कर सकते हैं। लेखकों को प्रयोगात्मक रूप से इस तरह के समर्थन का इलाज करने की सिफारिश की जाती है।

( http://www.w3.org/TR/CSS21/conform.html#conformance )

चीयर्स!

Question 8

एक और समय: हम सभी IE से नफरत करते हैं!

<div style="width:100%;background-color:blue;">
    <div style="margin:0 auto;width:300px;background-color:red;">
        Not Working
    </div>
</div>

<div style="width:100%;background-color:green;text-align:center;">
    <div style="margin:0 auto;width:300px;background-color:orange;text-align:left;">
        Working, but dumb that you have to use text-align
    </div>
</div>

Question 9

उपरोक्त सभी की कोशिश की, अंत यह कर रही है

<div style="width:100%; background-color:red; text-align:center;">
        <div style="width:900px; margin:0 auto; background-color:blue;">
            hello
        </div>
    </div>

Question 10

<!doctype html>अपने HTML आउटपुट के शीर्ष पर जोड़ें ।

Question 11

यदि यह "डिस्प्ले: ब्लॉक" है तो बटन को 100% चौड़ाई नहीं होनी चाहिए

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

मुझे लगता है कि इस उदाहरण में आपकी समस्या inputमूल रूप से एक ब्लॉक तत्व नहीं है। इसे एक और div के अंदर घोंसले के शिकार की कोशिश करें और उस पर मार्जिन सेट करें। लेकिन मेरे पास इस समय इसका परीक्षण करने के लिए IE8 ब्राउज़र नहीं है, इसलिए यह सिर्फ एक अनुमान है।

Question 12

"मार्जिन: 0 ऑटो" केवल IE में एक तत्व को केंद्र करता है यदि मूल तत्व में "पाठ-संरेखित: केंद्र" है।

Question 13

यह मानकर margin: 0 autoकि तत्व केंद्रित होना चाहिए, लेकिन चौड़ाई के रूप में छोड़ दिया जाता है - जो कुछ भी इसकी गणना की जाती है, अपनी मार्जिन सेटिंग्स की उपेक्षा करना।
यदि आप <INPUT>टैग को सेट करते हैं display:block, तो यह साथ केंद्रित होना चाहिए margin: 0 auto।

देखें दृश्य स्वरूपण मॉडल विवरण - की गणना चौड़ाई और मार्जिन अधिक जानकारी के लिए सीएसएस से 2.1 चश्मा। सापेक्ष बिट्स में शामिल हैं:

ब्लॉक फॉर्मेटिंग संदर्भ में, प्रत्येक बॉक्स का बायाँ बाहरी किनारा युक्त ब्लॉक के बाएँ किनारे को स्पर्श करता है।

तथा

जब किसी लाइन पर इनलाइन बॉक्स की कुल चौड़ाई लाइन बॉक्स की चौड़ाई से कम होती है, तो लाइन बॉक्स के भीतर उनके क्षैतिज वितरण को 'टेक्स्ट-एलाइन' संपत्ति द्वारा निर्धारित किया जाता है।

आखिरकार

यदि 'चौड़ाई' को 'ऑटो' पर सेट किया जाता है, तो किसी भी अन्य 'ऑटो' का मान '0' हो जाता है और 'चौड़ाई' परिणामी समानता का अनुसरण करती है।

यदि 'मार्जिन-लेफ्ट ’और-मार्जिन-राइट’ दोनों, ऑटो ’हैं, तो उनके उपयोग किए गए मान समान हैं। यह क्षैतिज रूप से युक्त ब्लॉक के किनारों के संबंध में तत्व को केंद्र में रखता है।