Windows가 아닌 Windows의 Chrome 삽입 상자 그림자 버그 : 해결 방법이 더 좋으신가요?

Question

이 글을 쓰는 시점의 최신 Windows 버전 인 Chrome 5.0.375.125는 현재 최신 버전입니다.

버그가 여기에 추적 : 당신은 Windows 또는 Linux에 있다면 http://code.google.com/p/chromium/issues/detail?id=25334

그래서, 문제는, 그리고 누군가가 또한 국경 반경을 갖는 요소에 삽입 된 상자 그림자를 사용하여, 당신은 얻을 버그 - 테두리 반경은 그대로 유지되지만 상자 상자 그림자가 여전히 정사각형 상자처럼 튀어 나오게됩니다. Mac OS X의 Chrome에서 예상대로 작동합니다.

질감이있는 배경을 사용하는 사람들은 불투명 한 테두리 색상이 필요하기 때문에이 해킹을 사용할 수 없습니다. 더 작은 반경에서도 효과가 있습니다.

이 해킹의 두 부분. 약간의 자바 스크립트 (jQuery를 + jQuery.client 플러그인) :

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

그리고 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 
    } 

내가 지금 샤워를 할 수 있습니까? 이 해킹은 나를 심하게 느끼게합니다.

더 나은 해결 방법을 제안한 사람이 있습니까?

당신은 당신이 경계의 같은 질감 사용할 수 있습니다 질감 배경으로, CSS를 해킹을 통해 사파리를 대상으로 JS 부분 제거 할 수

Answer 1

(까다로운을하지만 일부 텍스처 작동!) :

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