Firefox ve Chrome, kutu gölgesini oldukça farklı bir şekilde oluşturuyor gibi görünüyor.

Hem Chrome hem de Firefox'ta bir kutu gölge efekti test ediyordum ve iki tarayıcı arasında görüntü oluşturmada büyük bir fark görmekten çok şaşırdım. Özellikle Firefox'un sunumu çok daha karanlıktı.Firefox ve Chrome, kutu gölgesini oldukça farklı bir şekilde oluşturuyor gibi görünüyor.

Chrome Firefox

ilk görüntü Chrome 22'de oluşturulur ve Firefox'ta 16'da ikincisi, Mac OS 10.8.2 altında çalışan hem: Burada iki referans görüntülerdir. İki imgenin neden bu kadar farklı işlediğine dair hiçbir fikrim yok. İşte her iki tarayıcılar için aynı kutu gölge kendisi var:

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);

canlı bir demo için, here görebilirsiniz. Efekti elde etmek için farenin üzerine getirin.

Bu önemli farkı düzeltmede yapabileceğim bir yol var mı?

kaynak

2012-10-21 Alexis King

Bu olmuştur bir sorunu kontrol edebilmesi için herhangi bir keman veya bağlantısı var Dou. Bunun nedenini hala bilmiyorum: http://stackoverflow.com/questions/11167516/different-output-for-same-box-shadow-size-in-chrome-and-firefox – BoltClock

Tahminimce, bu tarayıcının tasarladığı bir bileşendir. Örneğin, Alert popup'ları farklı tarayıcılarda çok farklı görünür. Aynı görünüşe sahip olmak istiyorsanız, kendiniz çizmeniz ve kodlamanız gerektiğini düşünüyorum. – user1894606

Firefox için farklı bir stil kullanacak bir ortam seçici oluşturabilirsiniz. Onunla oynamak zorunda kalacaksın. Örneğin, bulanıklığı, yayılımı azalttım ve son gömme kutu gölgesinin opaklığını artırdım. Yani .box CSS: muhtemelen böyle bir şey görünmelidir hover: daha fazla medya seçicileri ve diğer tarayıcı için

.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)); 
} 
}

Chrome ve Firefox farklı html oluşturuculara kullandıkları için var BrowserHacks.com

kaynak

2013-09-13 13:18:28 thexpand

Her tarayıcının öneklerini kullanmanın yeterli olacağını ve bunun için bir şifre kullanmanın bir sebebi olmayacağını varsayalım. – xpy

@xpy Bana bir örnek verebilir misiniz, çünkü seni anlayamıyorum? – thexpand

Örnekte bir keman yaptım: http://jsfiddle.net/pavloschris/hkJkG/ özniteliğin bir düzeltilmemiş sürümü olsa bile, chrome öneklenmiş olanı kullanır, diğer tarayıcılar önyüklenmemiş kullanır. – xpy

gidebilir kesmek . Bence şiddetli farkın raga renginden kaynaklandığını, bunun yerine gölgeyi soluduğunu düşünüyorum.

kaynak

2013-11-21 19:09:41 doory

css yardımcı olacaktır sıfırlama Olabilir:

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

kaynak

2013-12-11 08:02:47 mosa1991

Lütfen daha fazla bilgi edinmek için ** cevap vermemeyi * öğrenmek için bu http://stackoverflow.com/help/deleted-answers adresini okuyun. Yani: "Soruya temel olarak cevap vermeyen cevaplar": ** harici bir siteye bağlantıdan çok daha fazlası ** –

Çok Bunu yaparken deneyin birden kutu gölgeleri kullanan

(ayrıca ben denemek için aşağıdaki yapmış kutu gölgelerden alfa kaldırır) hala varsa

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);

bir sorun bu yüzden uzunca bir süre düzgün

kaynak

2014-02-19 07:27:10

Firefox ve Chrome, kutu gölgesini oldukça farklı bir şekilde oluşturuyor gibi görünüyor.

cevap

İlgili konular