2010-04-14 19 views
10

चलो Wordpress द्वारा उत्पन्न एक पृष्ठ पर some comments1) पर एक नजर है (यह एक साइट मैं बनाए रखने नहीं है, मैं बस सोच रहा हूँ यहाँ क्या चल रहा है)। चूंकि ये पृष्ठ निकट भविष्य में गायब हो सकते हैं, मैंने कुछ स्क्रीनशॉट ऑनलाइन रखे हैं। यहाँ मैं क्या देखा है:विरासत

Screenshot of comments, together with the nifty little Firebug thing

जाहिर है, सूची आइटम मार्कर वहाँ नहीं होना चाहिए। तो मैंने फायरबग का उपयोग कर स्रोत को देखने का फैसला किया। जैसा कि आप देख सकते हैं, फायरबग का दावा है कि list-style संपत्ति (none युक्त) ol.commentlist से विरासत में मिली है। लेकिन अगर ऐसा है, सर्कल और वर्ग क्यों दिखाई दे रहे हैं? गणना की गई शैली की जांच करते समय, फायरबग list-style-type एस सही ढंग से दिखाता है।

सही व्यवहार क्या है? मैं सिर्फ क्रोमियम में एक त्वरित जांच, जिसका वेब निरीक्षक वास्तविकता का एक बेहतर दृश्य दिया (सूची आइटम मार्कर भी इस ब्राउज़र में प्रदर्शित किए गए) किया:

View of Chromium's web inspector showing the same page

वेबकिट के अनुसार, ol.commentlist की list-style नहीं है विरासत में, प्रतिपादन इंजन से केवल list-style-type का डिफ़ॉल्ट मान।

तो, हम निष्कर्ष निकाल सकते हैं कि दोनों ब्राउज़रों का आउटपुट सही है और फ़ायरफ़ॉक्स (फ़ायरबग) विरासत शैलियों का गलत प्रतिनिधित्व दिखाता है। CSS specification क्या कहता है?

विरासत LI तत्वों को OL और UL तत्वों से list-style मूल्यों स्थानांतरित करेंगे। यह सूची सूची शैली जानकारी निर्दिष्ट करने के लिए अनुशंसित तरीका है।

गुणों के ul एस के गुणों के बारे में अधिक नहीं। क्या इस संबंध में फायरबग गलत है या ul के उत्तराधिकारी (कुछ) गुण ol से निहित होना चाहिए (और यदि हां, तो दो अलग-अलग ब्राउज़र में तदनुसार तत्व क्यों नहीं दिए जाते हैं)? स्पष्ट होने के लिए, मेरा वास्तविक प्रश्न यह है: 0 गुणों को ul तत्वों को ol तत्वों से प्राप्त करने वाले तत्वों को निहित करना चाहिए जो उन्हें संलग्न करते हैं?

संपादित करें: मैं ओपेरा के बारे में भूल और तस्वीर और भी अधिक स्पष्ट हो जाता है जब कि ब्राउज़र के निरीक्षक को देख:

Opera's web inspector pane

दाएँ फलक पता चलता है, नेस्ट ul तत्वों ol से गुण वारिस करना तत्व, लेकिन ब्राउज़र के डिफ़ॉल्ट मान list-style-type और list-style-position उनके माता-पिता द्वारा निर्दिष्ट किए गए ओवरराइड को ओवरराइड करते हैं।

जैसा कि विंहबॉय मेरे संदेह का समर्थन करता है कि यह कहीं भी एक बग है (फ़ायरफ़ॉक्स? फायरबग?), मैंने bug report दायर किया।


Btw, मैं मार्कर सिर्फ

ol.commentlist, li.commentlist, ul.children { 

को style.css की लाइन 312 को बदलने जब भी स्पष्ट रूप से none को ul.children की list-style को परिभाषित करते हुए गायब हो जाने में कामयाब रहे, मार्कर चित्रित नहीं कर रहे हैं। यदि आप चाहें तो इस मामले में आप Firebug और वेबकिट के Web Inspector के स्क्रीनशॉट देख सकते हैं।


1) पेज के डेवलपर से संपर्क के बाद वह) अवांछित सूची मार्करों तय है, तो आप नहीं इस मुद्दे को अब और (संपादन मक्खी पर सीएसएस के बिना देख सकते हैं। आप अभी भी यह देखने के लिए स्क्रीनशॉट देख सकते हैं कि यह सब कुछ क्या है, लेकिन मैंने एक टेस्ट केस भी बनाया और कहा कि मेरे bug report पर। हर किसी की सुविधा के लिए, HTML/CSS स्रोत पढ़ता है:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>&lt;ol&gt;/&lt;ul&gt; inheritance test case</title> 
    <style> 
    ol { 
    list-style: none; 
    } 
    </style> 
</head> 
<body> 
    <!-- Some of the text below is quoted from D.E. Knuth, The TeXBook, p. 395 --> 
    <ol> 
    <li>First item</li> 
    <li>Second one</li> 
    <li>Now let's have some fun with a nested &lt;ul&gt;: 
    <ul> 
    <li>First item</li> 
    <li>And the second one again (this is incredibly boring, but it's just an example)</li> 
    <li>Ho hum</li> 
    <li>Are you still there?</li> 
    </ul> 
    </li> 
    <li>Just another item</li> 
    </ol> 
</body> 
</html> 

बस ul का चयन करें और नोटिस Firebug का कहना है कि यह है कि यह (ol से सूची शैली की संपत्ति विरासत में मिला है, हालांकि यह नहीं था, जब हम पर देखने के वास्तव में प्रस्तुत पृष्ठ)।

कृपया वेबकिट के वेब इंस्पेक्टर और विशेष रूप से ओपेरा संस्करण के साथ इसकी तुलना करें। उत्तरार्द्ध explicitly makes clear कि यह ब्राउज़र के list-style-type और list-style-position के डिफ़ॉल्ट मानों पर वापस आ जाता है।

+0

बहुत अच्छा अवलोकन। ऐसा लगता है कि फायरबग यहां गलत है। – vinhboy

+0

अच्छी तरह से देखा, लेकिन मुझे यकीन नहीं है कि आपका प्रश्न क्या है? – graphicdivine

+0

@graphicdivine: मुझे पहले से ही डर था। चीजों को स्पष्ट करने के लिए, मैंने अपना वास्तविक प्रश्न बोल्ड टाइपफेस में सेट किया है। मैंने एक न्यूनतम परीक्षण केस भी जोड़ा, क्योंकि जिस मूल पृष्ठ से मैंने लिंक किया है, वह निश्चित है। –

उत्तर

2

दरअसल, स्टाइलिंग विरासत की आपकी धारणा थोड़ी दूर है। विरासत से ol.commentlist की बजाय होगी। विसंगति का कारण यह है कि फ़ायरफ़ॉक्स सूची आइटमों के साथ-साथ सूची रैपरों को सूची-प्रकार स्टाइल स्वीकार करता है। अनियंत्रित सूची पर पूरी तरह गोलियों को अक्षम करने के लिए आपको यूएल टैग के लिए सूची-प्रकार सेट करना होगा। यही वजह है कि मैं सूची सूची से सूची-प्रकार को हमेशा हटा देता हूं और इसे सूची आइटम पर लागू करता हूं।

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

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