Lỗi hộp bóng của Google Chrome trên Windows, không phải trên máy Mac: Giải pháp tốt hơn?

Question

Điều này vẫn còn hiện hành trên Chrome 5.0.375.125, là bản phát hành Windows mới nhất tại thời điểm viết bài này.

Bug được theo dõi ở đây: http://code.google.com/p/chromium/issues/detail?id=25334

Vì vậy, vấn đề là, nếu bạn đang ở trên Windows hoặc Linux, và ai đó sử dụng inset hộp bóng trên một yếu tố đó cũng có border-radius, bạn nhận được một lỗi - bán kính đường viền được giữ nguyên, nhưng hộp bóng hình chữ nhật sẽ tràn ra ngoài, như thể nó vẫn là một ô vuông. Nó hoạt động như mong đợi trong Chrome trên Mac OS X.

những người sử dụng nền có kết cấu không thể sử dụng hack này, vì nó yêu cầu màu viền mờ. Nó cũng chỉ thực sự hoạt động tốt trên bán kính nhỏ hơn.

Hai phần của bản hack này. Một chút Javascript (jQuery + jQuery.client plugin):

if ($.client.browser == "Chrome" && $.client.os != "Mac"){ 
    $('html').addClass("inset-radius-hack"); 
}; 

Và CSS

#div{ 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    border-radius: 7px; 
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    padding: 5px 10px; 
    margin-bottom: 10px; 
    max-width: 120px; 
} 

    html.inset-radius-hack #div { 
    border: 2px solid #fff; /* cover the edges with the border 
    margin: 0 -2px 0 -2px; /* and take back the extra pixels the border adds 
    } 

Tôi có thể đi tắm bây giờ? Hack này làm cho tôi cảm thấy thô.

Có ai đưa ra giải pháp tốt hơn cho việc này không?

Answer 1

Bạn có thể thoát khỏi phần JS bởi nhắm mục tiêu săn qua một css hack, như đối với nền kết cấu bạn có thể sử dụng các kết cấu tương tự cho các biên giới (khó khăn nhưng công trình đối với một số kết cấu!):

<style type="text/css"> 
#div{ 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
    border-radius: 7px; 
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset; 
    padding: 5px 10px; 
    margin-bottom: 10px; 
    max-width: 120px; 
} 

/* Safari */ 
@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 
    #div{ 
    border: 3px solid #fff; /* cover the edges with the border*/ 
    margin: 0 -3px 0 -3px; /* and take back the extra pixels the border adds*/ 
    -webkit-border-image: url(texture.gif) 4 repeat ; /*add the texture to the border*/ 
    } 
} 
</style>