Firefox và Chrome dường như hiển thị hộp bóng hoàn toàn khác nhau

Question

Tôi đã thử nghiệm hiệu ứng bóng đổ trong cả Chrome và Firefox và tôi đã rất ngạc nhiên khi thấy sự khác biệt rõ rệt về hiển thị giữa hai trình duyệt. Đáng chú ý, kết xuất của Firefox là nhiều hơn tối hơn. Dưới đây là hai hình ảnh tham khảo:

Những hình ảnh đầu tiên được kết xuất trong Chrome 22, và sau này trong Firefox 16, cả hai đều chạy trên Mac OS 10.8.2. Tôi không biết tại sao hai hình ảnh lại hiển thị khác nhau. Đây là chính hộp bóng, giống với cả hai trình duyệt:

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

Để có bản trình diễn trực tiếp, bạn có thể xem here. Di chuột qua hộp để có hiệu ứng.

Có cách nào tôi có thể khắc phục sự khác biệt quyết liệt này trong hiển thị không?

Answer 1

Bạn có thể tạo bộ chọn phương tiện cho Firefox sẽ sử dụng một kiểu khác. Bạn sẽ phải chơi đùa với nó. Ví dụ, tôi làm giảm độ mờ, sự lan tỏa và tăng độ mờ đục của hộp bóng tối bên trong. Vì vậy, các CSS cho .box: hover có lẽ nên nhìn một cái gì đó như thế này:

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

Để biết thêm phương tiện truyền thông selectors và trình duyệt khác hacks bạn có thể truy cập BrowserHacks.com

Answer 2

Đó là bởi vì Chrome và Firefox sử dụng kết xuất đồ họa html khác nhau . Tôi nghĩ rằng sự khác biệt quyết liệt là do màu sắc raga, thay vào đó hãy thử làm mờ dần bóng tối.

Answer 3

Có thể đặt lại css sẽ giúp:

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

Answer 4

Bạn đang sử dụng nhiều bóng hộp vì vậy hãy thử làm điều này (cũng loại bỏ alpha từ bóng hộp Tôi đã làm điều này dưới đây để bạn có thể thử)

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

Nếu bạn vẫn có vấn đề gì đó, bạn có thể kiểm tra chính xác