2012-05-19 13 views
35

मैं एक प्रयोग & मुझे पता चला है कि "रूपरेखा" सीएसएस 2 संपत्ति वेबकिट & पर उसी तरह लागू नहीं किया गया छिपकलीसीएसएस "रूपरेखा" पर वेबकिट और छिपकली

नीचे स्क्रिप्ट में पर काम कर रहा हूँ अलग व्यवहार व्यवहार , मेरे पास एक और div के अंदर एक पूर्ण स्थिति div है लेकिन इसके बाहर तैर रहा है। वेबकिट की रूपरेखा गेको पर वास्तविक माता-पिता div को रेखांकित करती है, यह बच्चे के आइटम को कवर करने के लिए फैली हुई है।

http://jsfiddle.net/KrCs4/

Am मैं कुछ भी याद आ रही? क्या ऐसी कोई संपत्ति है जिसे मुझे गेको पर ओवरराइट करने की आवश्यकता है? या यह एक बग के रूप में रिपोर्ट किया जाना चाहिए?

वेबकिट स्क्रीनशॉट:

Webkit Screenshot

फ़ायरफ़ॉक्स स्क्रीनशॉट:

Firefox Screenshot

संपादित करें:

यह एक बग होने की पुष्टि की और यहाँ एक समाधान है: http://jsfiddle.net/7Vfee/ (आप की जरूरत है सुनिश्चित करें कि अभिभावक स्थित है: टी के लिए सापेक्ष या पूर्ण काम करने के लिए उनके कामकाज।

+0

पता नहीं ओह, मैं अलग विधि – ShibinRagh

+0

फ़ायरफ़ॉक्स बग की कोशिश की : https://bugzilla.mozilla.org/show_bug.cgi?id=687311 – epascarello

उत्तर

17

छिपकली की यह असंगत व्यवहार प्रसिद्ध और काफी पर्याप्त रूप से प्रलेखित है, हालांकि अजीब नहीं MDN पर लेकिन SitePoint Reference पर:

फ़ायरफ़ॉक्स के लिए और संस्करण 3.5 सहित की सामग्री के आसपास रूपरेखा रूपरेखा आकर्षित करेगा एक तत्व जो तत्व के वास्तविक सेट आयामों के बजाए इसकी सीमाओं को पार कर गया है।

यह फ़ायरफ़ॉक्स के सभी संस्करणों को प्रभावित करता है। मुझे इस समय इसके लिए एक व्यावहारिक कार्यवाही दिखाई नहीं दे रही है, इसके अलावा अपने माता-पिता से अपने पूरी तरह से स्थित div को हटाने और इसे सापेक्ष रखने के अलावा ... कुछ और।

+1

साइटपॉइंट के पास आधिकारिक डब्ल्यू 3 सी स्पेक की तुलना में अधिक दस्तावेज क्यों है? http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines –

+0

@Xavier हो: साइटपॉइंट ब्राउज़र संगतता और व्यवहार पर केंद्रित है। कार्यान्वयन विवरण को परिभाषित करने के लिए यह कल्पना का काम नहीं है। – BoltClock

+0

कार्यान्वयन के बावजूद, यह ब्राउज़र व्यवहार को परिभाषित करने के लिए डब्ल्यू 3 सी का काम है। जहां तक ​​मैं कह सकता हूं, आकार की बात आने पर रूपरेखा बहुत अच्छी तरह परिभाषित नहीं है। –

30

मैं एक ही मुद्दा था, इसलिए मैं एक बॉक्स के छाया का उपयोग करने के रूपरेखा का उपयोग करने से यह बदली:

box-shadow: 0px 0px 0px 1px #FFF; 
बजाय

outline:1px #dcdcdc solid; 
+0

बाद में टिप्पणी, लेकिन मैं जोड़ना चाहता था कि फ़ायरफ़ॉक्स किसी भी चारों ओर एक रूपरेखा तैयार करेगा: सीएसएस में जोड़े गए सामग्री के बाद। उपरोक्त के रूप में बॉक्स-छाया का उपयोग समस्या को हल करेगा। वास्तव में, एकमात्र कारण मैं वास्तव में किसी भी चीज़ के लिए रूपरेखा का उपयोग करने के बारे में सोच सकता हूं, आईई 8 समर्थन होगा - स्पष्ट रूप से यह रूपरेखा कर सकता है लेकिन बॉक्स-छाया नहीं। – crowhill

+0

@crowhill रूपरेखा का उपयोग करने का एक अन्य कारण यह है क्योंकि यह ऑफ़सेट जोड़ने का एक तरीका प्रदान करता है। –

+3

इसे सही उत्तर के रूप में चिह्नित किया जाना चाहिए! –

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