अधिकांश ब्राउज़रों में त्रुटि

पृष्ठभूमि:

किसी तरह अचानक एक आदेश साइट पर एक दिलचस्प प्रभाव बनाने के लिए दिखाई दिया। काम आसान लगता है लेकिन उसी समय इसने थोड़ा सोचा। मैं खुद अभी 3 साल से लेआउट कर रहा हूं। और उसने इस तरह का कुछ भी नहीं किया। मैंने विकास की सराहना की और सहमति व्यक्त की। लेकिन यहाँ नुकसान मेरी प्रतीक्षा कर रहा था और मुझे विकल्प 1 में मिली त्रुटि ओपेरा नेक्स्ट ब्राउज़र (12.00 अल्फ़ा b.1351) को प्रभावित करती है। Google Chrome 19 (dev) और मोज़िला FF 11 (रिलीज़), IE9-10 के लिए - सब कुछ क्रम में है। विकल्प 2 में, क्रोम ने आत्मसमर्पण किया।

भाग 1। प्रस्तावना।

और इसलिए बग का सार है: ओपेरा प्रेस्टो रेंडरिंग इंजन 2.10 पार्सिंग एरर और कुछ IE इंजन। बग बहुत दुर्लभ है क्योंकि समान css2 और css3 नियमों का संयोजन बहुत दुर्लभ है।
आधिकारिक प्रेस्टो पृष्ठ पर एक नज़र डालें।



हम css3 सीमा-त्रिज्या के लिए पूर्ण समर्थन देखते हैं।

आइए एक काफी सरल HTML कोड लिखते हैं:


कोड के लिए लिंक।

और इसलिए कार्य, हमें 150x150px s के ब्लॉक आकार की आवश्यकता है,

overflow:hidden;

और 400x400px के आकार के साथ ब्लॉक के अंदर यह प्रतीत होता है कि क्या पकड़ है? दरअसल, कई लोग जिन्होंने "गोल चक्कर" बनाए, उन्होंने खुद इस संपत्ति का इस्तेमाल किया।

सभी ब्राउज़रों में परिणाम अपेक्षित है ( उदाहरण के लिए लिंक ):


यहां हम त्रुटि के सार में आते हैं, मुझे "विंडोज़" की आवश्यकता थी, मैंने चित्रों का एक गुच्छा नहीं काटने का फैसला किया, लेकिन बस कक्षाओं में जोड़कर css3 संपत्ति का उपयोग करें। p1 और .p2 :

border-radius:100%;

जो लोकप्रिय ब्राउज़रों के सभी नवीनतम संस्करणों में काम करता है।


यहीं से गर्मी की शुरुआत हुई।
समान कोड लिखे जाने के बाद, मैंने देखा: क्रोम 19 और एफएफ 12 में, और IE में अपेक्षित परिणाम काफी अपेक्षित है:


खुलने वाला ओपेरा अगला 11 अल्फ़ा, मुझे निम्नलिखित मिला ( एक उदाहरण से लिंक ):

यह क्या है कैसे? क्यों? - मेरे पास ये सवाल हैं।

आखिरकार, यह मानक गुणों का एक संयोजन है जो सभी ब्राउज़रों द्वारा पूरी तरह से समर्थित है।

भाग २ डब्ल्यूटीएफ ?!

लेकिन इतना ही नहीं, मुझे एक और संपत्ति की आवश्यकता थी, जो कि, मुझे ऐसा लग रहा था, काफी कमनीय है, कम से कम क्रोम और एफएफ में।
लेकिन यहां फिर से, बड़ी उदासी मुझे इंतजार कर रही थी।

कोड से लिंक करें।

वर्तमान स्थान के सापेक्ष वास्तविक स्थिति को जोड़कर, क्रोम 19 देव ने त्याग दिया और ओपेरा नेक्स्ट 11 ने भी जीवन के कोई संकेत नहीं दिखाए।
Chrome, Opera का परिणाम ( उदाहरण के लिए लिंक ):



लेकिन जिसने वास्तव में आश्चर्यचकित किया वह एफएफ इंजन और आईई है, उसने परीक्षा पास कर ली!


मैं इस विषय पर चर्चा के लिए स्कोबकिन को धन्यवाद देना चाहता हूं।

निष्कर्ष:

खुद के लिए, मैंने पाया कि आपको हमेशा "नियम" का पालन करना चाहिए।
काश, मुझे कोई रास्ता नहीं मिला। लेकिन! एक छोटी सी हैक है जो वास्तविक स्थिति के लिए कह सकती है कि मार्जिन गुणों का उपयोग करना है।

मैंने त्रुटि के अवलोकन के साथ एक लेख बनाने की कोशिश की और विषय पर एक सामान्य चर्चा के बारे में सोचा: "क्यों?"। और उसे केवल व्हिनर्स और पेडेंट मिले। धन्यवाद हबल!

मैंने लेख में जोड़ने का फैसला किया (धन्यवाद zapimir ):

फिर भी महत्वपूर्ण है, आपको यह समझने की आवश्यकता है कि IE में कई इंजन हैं, और यदि कोई सिद्धांत नहीं है, तो आपको यह दावा करने से पहले भी देव उपकरणों को देखने की आवश्यकता है कि यह IE 9 में है कि कुछ काम नहीं करता है।

सामान्य तौर पर, दुर्भाग्य से, अलग-अलग प्रतिपादन स्कूल हैं। और वैसे, विस्तार से ध्यान देने के लिए सिर्फ IE 9 की आवश्यकता है।
यहाँ बॉर्डर और बॉर्डर-त्रिज्या जैसी सामान्य बात का उदाहरण दिया गया है। ऐसा लगता है कि हर कोई लंबे समय से इसका समर्थन कर रहा है, लेकिन यदि आप उदाहरण के लिए बिंदीदार बॉर्डर टाइप बनाते हैं, तो ब्राउज़र बाहर शुरू हो जाते हैं।


IE9, जैसा कि मुझे लगता है, सबसे सही प्रतिपादन देता है (बिंदु गोल होते हैं और समान रूप से सीमा पर वितरित होते हैं, एक दूसरे को ओवरलैपिंग नहीं करते हैं), क्रोम का मानना ​​है कि जब वे बड़े होते हैं तो बिंदु चतुष्कोणीय हो जाते हैं। ओपेरा और एफएफ में, अंक एफएफ में सुपरिम्पोज किए जाते हैं, यह विशेष रूप से अनाड़ी दिखता है।

आप इसे इस पृष्ठ पर देख सकते हैं ।

PS: यह त्रुटि ओपेरा और क्रोम बग ट्रैकर को भेजी जाएगी।
PS2: यदि आप लेख में कोई गलती पाते हैं, तो कृपया पीएम में लिखें।
PS3: मैं वास्तव में एक निजी में लिखा जाना चाहता हूं जिसके लिए हम शून्य से आते हैं। मुझे आलोचना पसंद है।
PS4: मैंने स्वाभाविक रूप से डॉक-प्रकार के साथ परीक्षण किया। एक वास्तविक परियोजना पर। वह बंद है और मैं अपने टीके या खुद को नहीं दिखा सकता हूं। मैं सब कुछ समझता हूं, लेकिन समुदाय को मुझे थूकने के लिए दोष नहीं देना चाहिए।
PS5: एक डॉक जोड़ा और एक वैध दस्तावेज बनाया - हुर्रे!
PS6: png और jpeg के बारे में मजाक प्रासंगिक नहीं है।
PS7: आंख में जलन नहीं करने के लिए, कोड को चित्रों के साथ बनाया गया था और संबंधित कोड के लिंक लगाए गए थे।
PS8: उदाहरणों को jsfiddle में ले जाया गया।