JQuery의 fadeIn 및 fadeOut 메소드를 사용하여 일부 이미지를 순환시키는 내 홈 페이지에서 작업합니다.Safari/Chrome에서 border radius 속성을 사용하는 이미지 모서리가 올바르게 포맷되지 않았습니다.
이미지의 테두리는 2 픽셀이고 반경은 14 픽셀입니다.
이미지에서 볼 수 있듯이 이미지의 모서리는 테두리와 겹치고 있습니다.
이 동작은 Firefox 및 IE가 아닌 Safari 및 Chrome에서만 발생합니다.
누구나 이유는 무엇입니까?
http://www.findyourgeek.com/index-copy.php
감사 :
는 현재이 동작을 볼 수 있습니다.
는border-radius에 대한
지원은 약간의 버그가 위의 게시물 올해 초부터입니다
Chrome -webkit-border-radius bug? - CSS-Tricks Forums
에게 (10 버전 ~ 크롬) 것 같다 때 이미지에 border-radius에 대한 지원이 작동하지 않았습니다. 지원이 가능하지만 알고있는 것처럼 여전히 문제가 있습니다. 보고있는 버그를 Webkit/Chrome/Safari 프로젝트에보고하고 싶을 수 있습니다. Chromium에 대한 버그보고 페이지를 쉽게 찾을 수 있다는 것을 알고 있습니다. 다른 두 가지에 대해서는 확실하지 않습니다. 당신이 2 픽셀 border을 제거하고 2 픽셀 스트로크 box-shadow (box-shadow:0 0 0 2px #606060;)을 설정하여 CSS3 해킹의 종류를 적용 할 수 있습니다
:
여기에 해결 방법 두 가지 아이디어입니다. 그것이 다른 옵션들이 둥근 모서리주기 위해 사진을 편집하는 것입니다 크롬/사파리 example jsfiddle
또는 과정의 수정이다
는 이미지 자체에서 테두리 스타일을 제거하고
#content #topStoriesTest {
border: 1px solid #CCCCCC;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
height: 318px;
overflow: hidden;
position: relative;
width: 549px;
}