फ़ायरफ़ॉक्स

Question

में सीएसएस रूपरेखा सही ढंग से प्रस्तुत नहीं कर रही है, मैं सीएसएस की रूपरेखा संपत्ति फ़ायरफ़ॉक्स 7 या उससे नीचे के तरीके के साथ जिस तरह से परेशान हूं, उससे थोड़ा परेशान हूं। यह स्पष्ट रूप से कहीं समस्या है, लेकिन मुझे बस यह नहीं मिल रहा है।

यह अन्य सभी मुख्य ब्राउज़रों (ओपेरा, क्रोम, आईई, सफारी) पर ठीक काम करता है।

मैंने संदर्भ के लिए कुछ स्क्रीनशॉट जोड़े हैं। फ़ायरफ़ॉक्स से एक:

और Chrome से अन्य: है एक्सएचटीएमएल

form#commentform input:focus { outline: 2px outset #717377 } 

यहाँ:

यहाँ सीएसएस है

<form id="commentform"> 
     <div> 
     <label for="name"> 
      <strong> 
      Nom 
      <span id="sname"></span> 
      </strong> 
     </label> 
     <input type="text" tabindex="1" id="name" name="name" class="textbox" /> 
     </div> 
... 
</form> 

मैं इसे कैसे हल कर सकता हूं?

Answer 1

फ़ायरफ़ॉक्स रूपरेखा box-shadow (अंदर नहीं) के आसपास खींचे जाते हैं।
तो आपको इसे अतिरिक्त सेवा (एक सीएसएस हैक का उपयोग करके) एक अतिरिक्त नियम: outline-offset: -X (एक्स = छाया की लंबाई) की सेवा करनी होगी।

Answer 2

यह बग फ़ायरफ़ॉक्स 30: https://bugzilla.mozilla.org/show_bug.cgi?id=480888#c109 के साथ तय किया जाएगा।

तब तक आप, तत्व को एक और बॉक्स-छाया लागू हो सकते हैं क्योंकि आप एकाधिक बॉक्स छाया हो सकता है:

.element { 
    box-shadow: your values old box-shadow, 0 0 0 2px #717377; 
}