테두리 반경이 img 요소에 적용되지 않았습니다.

Question

IE 10에서 테두리 반경을 설정하려고하는데 IE 9에서는 작동하지만 IE 9에서는 작동하지 않습니다. 왼쪽 위 이미지의 모퉁이에서 테두리 반경 주위로 이미지가 잘리지 않습니다.

BAD :

<img style="border-radius: 14px 0px 0px 0px" alt="" src=""> 

I는 오른쪽으로 또는 두 번째 경계 반경을 추가하면 지금, 그 좌측 위 반경인가, 왼쪽 아래.

GOOD : 나는에 Microsoft에서 다시 들어 :이 URL은

http://gamma.tiedtheleader.com/border-radius.htm

UPDATE 9/30을 IE (10)를 사용하지 않는 사람들을 위해 참조 이미지를 문제를 보여줍니다 및 추가

<img style="border-radius: 14px 1px 0px 0px" alt="" src=""> 

Connect 사이트에 접속하여 문제를 재현 할 수 있었고이를 조사하고 있음을 확인했습니다.

Answer 1

이미지에서 IE 10에 적용되지 않는 둥근 모서리와 동일한 문제가 발생했습니다. 보더 모든 결과로했다과 중 하나를 변경

border-radius: 45px 0 45px 0; 

의 내 국경 반경이 다시 표시 만든 공의 경계 반경 : 원래 나는이 있었다. 끝에

나는이 스타일 적용 : 다른 브라우저에서 부작용이없는

border-radius: 45px 0.1px 45px 0.1px; 

을,하지만 난 다시 IE10은 아직 베타 아닌가

Answer 2

시도 border-top-left-radius: 14px.

Answer 3

대부분의 브라우저에서 둥근 테두리가있는 이미지를 자르지 않습니다. (그리고 IE10이 다른 브라우저에서 이상하게 보일지라도). 가장 간단한 해결책은 중첩 된 DIV를 사용하여 이미지를 배경으로 설정하는 것입니다 :

HTML

<div class="imageborder"> 
    <div id="image1"> </div> 
</div> 

CSS

.imageborder { 
    border-radius: 5px; 
} 
#image1 { 
    background-image: (yourimage); 
} 

당신은 표시를 위해 사업부 수동으로 높이를 설정해야 할 수도 있습니다 .