1. घर
  2. सवाल और जवाब
  3. फ़ायरफ़ॉक्स और क्रोम बॉक्स-छाया को काफी भिन्न रूप से प्रस्तुत करना प्रतीत होता है

फ़ायरफ़ॉक्स और क्रोम बॉक्स-छाया को काफी भिन्न रूप से प्रस्तुत करना प्रतीत होता है

2012-10-21 9 views
13

मैं क्रोम और फ़ायरफ़ॉक्स दोनों में एक बॉक्स-छाया प्रभाव का परीक्षण कर रहा था और मैं दो ब्राउज़रों के बीच प्रतिपादन में एक कठोर अंतर देखने के लिए आश्चर्यचकित था। विशेष रूप से, फ़ायरफ़ॉक्स का प्रतिपादन बहुत गहरा था।फ़ायरफ़ॉक्स और क्रोम बॉक्स-छाया को काफी भिन्न रूप से प्रस्तुत करना प्रतीत होता है

ChromeFirefox

पहली छवि क्रोम 22 में प्रदान की गई है, और Firefox 16 में बाद, दोनों मैक ओएस 10.8.2 के तहत चल रहा: यहाँ दो संदर्भ छवियाँ हैं। मुझे नहीं पता कि दो छवियां इतनी अलग क्यों रेंडर कर रही हैं। यहाँ बॉक्स छाया ही है, दोनों ब्राउज़रों की तरह है:

box-shadow: 0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5);

एक लाइव डेमो के लिए, आप here देख सकते हैं। प्रभाव प्राप्त करने के लिए बॉक्स पर माउस।

क्या कोई तरीका है कि मैं प्रतिपादन में इस कठोर अंतर को ठीक कर सकता हूं?

स्रोत

2012-10-21 Alexis King

+2

यह किया गया है जाँच कर सकते हैं अगर वहाँ अब भी है। मुझे अभी भी पता नहीं है कि इसका क्या कारण है: http://stackoverflow.com/questions/11167516/different-output-for-same-box-shadow-size-in-chrome-and-firefox – BoltClock

+0

मेरा अनुमान है कि यह एक घटक है जो ब्राउज़र कम्पनी डिजाइन करता है। उदाहरण के लिए, अलर्ट पॉपअप अलग-अलग ब्राउज़रों में बहुत अलग दिखते हैं। यदि आप एक जैसा दिखना चाहते हैं, तो मुझे लगता है कि आपको इसे आकर्षित करना और कोड करना है। – user1894606

उत्तर

4

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

.box:hover { 
    box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5)); 
} 

@-moz-document url-prefix() { 
.box:hover { 
    box-shadow(0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 130px -120px rgba(0,0,0,0.9)); 
} 
}

अधिक मीडिया चयनकर्ताओं और अन्य ब्राउज़र के लिए हैक करता आप यात्रा कर सकते हैं BrowserHacks.com

स्रोत

2013-09-13 13:18:28 thexpand

+0

मुझे लगता है कि प्रत्येक ब्राउज़र के उपसर्ग का उपयोग पर्याप्त होगा, इसलिए इसके लिए हैक का उपयोग करने का कोई कारण नहीं है। – xpy

+0

@xpy क्या आप मुझे एक उदाहरण दे सकते हैं, क्योंकि मैं आपको समझ नहीं सकता? – thexpand

+2

मैंने उदाहरण का एक झुकाव बनाया: http://jsfiddle.net/pavloschris/hkJkG/ यदि विशेषता का कोई अपरिवर्तित संस्करण भी है, तो क्रोम प्रीफ़िक्स्ड एक का उपयोग करता है, अन्य ब्राउज़र अपरिक्स्ड का उपयोग करेंगे। – xpy

1

क्योंकि Chrome और Firefox अलग एचटीएमएल दाता का उपयोग करें कि । मुझे लगता है कि कठोर अंतर रागा रंग के कारण होता है, इसके बजाए छाया को लुप्त करने का प्रयास करें।

स्रोत

2013-11-21 19:09:41 doory

1

को रीसेट किया जा सकता है सीएसएस में मदद मिलेगी:

http://codepen.io/anon/pen/IteyC

स्रोत

2013-12-11 08:02:47 mosa1991

+1

कृपया, यह http://stackoverflow.com/help/deleted-answers को पढ़ने का प्रयास करें, यह समझने के लिए कि ** ** ** कैसे उत्तर दें। अर्थात्: "उत्तर जो मौलिक रूप से प्रश्न का उत्तर नहीं देते हैं": ** किसी बाहरी साइट के लिंक से मुश्किल से अधिक ** –

1

आप एक से अधिक बॉक्स छाया का उपयोग कर रहे हैं, ताकि ऐसा करने की कोशिश (भी बॉक्स छाया से अल्फा को हटा मैंने यह किया है नीचे आप की कोशिश करने के लिए)

box-shadow: 0px 1px 3px rgba(0,0,0), 
      inset 0px 4px 2px -2px rgba(255,255,255), 
      inset 0px -3px 1px -2px rgba(0,0,0), 
      inset 0px -20px 200px -100px rgba(0,0,0); 

-moz-box-shadow: 0px 1px 3px rgba(0,0,0), 
       inset 0px 4px 2px -2px rgba(255,255,255), 
       inset 0px -3px 1px -2px rgba(0,0,0), 
       inset 0px -20px 200px -100px rgba(0,0,0); 

-ms-box-shadow: 0px 1px 3px rgba(0,0,0), 
       inset 0px 4px 2px -2px rgba(255,255,255), 
       inset 0px -3px 1px -2px rgba(0,0,0), 
       inset 0px -20px 200px -100px rgba(0,0,0); 

-webki-box-shadow: 0px 1px 3px rgba(0,0,0), 
        inset 0px 4px 2px -2px rgba(255,255,255), 
        inset 0px -3px 1px -2px rgba(0,0,0), 
        inset 0px -20px 200px -100px rgba(0,0,0);

एक समस्या डोऊ आपको लगता है कि किसी भी बेला या लिंक है तो मैं काफी देर के लिए एक मुद्दा ठीक से

स्रोत

2014-02-19 07:27:10

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

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