JSFiddle जोड़ता है: http://jsfiddle.net/p7ph5vfj/टंकण प्रेत पृष्ठभूमि रंग शैली
मेरे सवाल यह है: किसी को भी इस क्रोम विशिष्ट बग करने के लिए एक वैकल्पिक हल का सुझाव कर सकते हैं? मेरी समस्या यह नहीं है कि अक्षर एक्स को हाइलाइट किया गया है, यह है कि यह .foo वर्ग खो देता है और इसलिए मुझे यह और नहीं मिल रहा है। मैं या तो .foo कक्षा में रहने के साथ ठीक हो जाएगा या अगर पृष्ठभूमि रंग दूर चला जाता है। मुझे यह भी नहीं पता कि इसे कैसे डीबग करना है क्योंकि ऐसा होने पर डोम ब्रेकपॉइंट्स आग नहीं लगती हैं।
<div contenteditable="true">
DO NOT REPLACE. <span class="foo">END a b c</span> d START la la
</div>
और सीएसएस इस तरह दिखता है:
.foo {
background-color: #ff0000;
}
चरणों क्रोम पर बग को गति प्रदान करने हैं:
, अपने माउस ले लो कर्सर शब्द START के बगल में जगह
टेक्स्ट का चयन करने के लिए क्लिक करें और दबाएं, बाएं ओर जाएं और शब्द पर चयन समाप्त करें समाप्त।
चयन में निम्नलिखित पाठ को ठीक से कवर करना चाहिए: "एक बी सी डी स्टार्ट" अंत करें। फिर, चयन दाएं से बाएं होना चाहिए।
प्रकार अपने कीबोर्ड पर एक नए चरित्र, 'एक्स'
एक्स लाल रंग में हाइलाइट किया जाता है तो तरह, आप बग ट्रिगर किया है।
विशेष रूप से बग एचटीएमएल अब इस तरह दिखता है:
<div contenteditable="true">
DO NOT REPLACE. <span style="background-color: rgb(255, 0, 0);">X</span> la la
</div>
.foo वर्ग कहाँ गए थे और जहां इस पृष्ठभूमि रंग शैली से आया? जब ऐसा होता है तो div या span में DOM ब्रेकपॉइंट्स को आग लगाना नहीं होता है।
बहुत अच्छी तरह से किया सवाल। मैं जानना चाहता हूं कि वहां क्या हो रहा है। – connexo
दिलचस्प, यह कक्षा से पृष्ठभूमि रंग प्राप्त करता है और इसे शैली में रखता है। और भी दिलचस्प बात यह है कि यदि कक्षा में 'रंग' संपत्ति है तो अवधि को उसकी कक्षा से अलग कर दिया गया है और रंग विशेषता के साथ '' टैग में लपेटा गया है !!! [यहां इसका एक उदाहरण दिया गया है] (http://jsfiddle.net/yhgp3xcv/) – misterManSam
हाँ, और यदि आपके पास '.foo {display: block} है 'तो यह अवधि में अतिरिक्त'
' जोड़ता है। यदि आपके पास '.foo {display: inline-block} है 'तो अवधि पूरी तरह से गायब हो जाती है। लवली सामानहालांकि कोई समाधान नहीं; मैंने 'आईडी' और 'भूमिका' के साथ परीक्षण किया, लेकिन वे गुण भी गायब हो गए। –