1 세대 iPhone에서 <img>의 CSS 둥근 모서리

Question

다음 코드는 모든 데스크톱 브라우저 에서 Chrome 및 Safari는 물론 최근에 테스트 한 iPhone 및 모든 Android 기기에서 작동합니다. 그러나 1 세대 iPhone 및 iPhone 3G의 경우 <img>의 왼쪽 상단 모서리가 둥글 리다.

iPhone에있는 모서리를 반올림하기 위해 가지고있는 다른 CSS (<h1> 요소)는 이러한 오래된 장치에서 제대로 작동하는 것 같습니다. 작동하지 않는 요소 인 <img>의 반올림 일뿐입니다.

관련 자바 스크립트 :

var profilePhoto = document.createElement("img"); 
profilePhoto.setAttribute("src","http://example.com/photo.jpg"); 
profilePhoto.setAttribute("alt",""); 
profilePhoto.setAttribute("class","menu-first"); 
profilePhoto.setAttribute("style","float:left; border:0; padding:0!important; margin-top:0!important; -webkit-border-top-right-radius:0; -webkit-border-top-left-radius:.5em;"); 
document.getElementById('menu-container').appendChild(profilePhoto); 

관련 HTML :

<div id="menu-container"></div> 

나는 "반경이 반 이미지 높이 또는 너비보다 큰 경우 표시되지 않습니다 둥근 모서리"는 알고있다 이 문제는 여기에서 일어나지 않습니다. 반경은 이미지 크기의 아주 작은 부분입니다.

는 JSFiddle : http://jsfiddle.net/RaK3T/

(와우, JSFiddle 실제로 아이폰 3G에서 작동, 그 끝내!)

UPDATE : 나는 그것을 아주 잘 휴대 전화 모델보다 더 중요한 아이폰 OS 버전 수 있습니다 가정 . iOS v4.3.2에서는 정상적으로 작동하지만 iOS v3에서는 정상적으로 작동하지 않는 것으로 보입니다.

Answer 1

이전의 특정 브라우저에서 문제가 발생하여 테두리가 전경 이미지 아래의 논리적 레이어로 그려지는 것처럼 들리는군요.

효과는 둥근 테두리가 실제로 그려지지만 전경 이미지는 그 위에 배치되며 잘리지 않습니다. 이는 전경 이미지가있는 유일한 태그이기 때문에 분명히 <img> 태그에만 영향을 미칩니다.

이 문제는 몇 년 전에 큰 문제였습니다. 일부 브라우저에 영향을 미쳤지 만 다른 브라우저에는 영향을 미치지 않았지만 이전 버전의 Firefox와 대부분의 Webkit 브라우저에서 확실히 문제가되었습니다.

문제는 신속하게 발견되어 해결되었습니다 (메모리가 작동하는 경우 Firefox보다 Webkit에서 다소 빨라짐). 우리 모두가 옮겼습니다.

그러나 이러한 브라우저의 이전 버전을 지원해야하는 웹 개발자에게는 여전히 문제가됩니다.

1. 대신 전경 <img>의 background-image 스타일을 사용

   세 가지 가능한 솔루션이 있습니다.

2. 문제를 무시하고 구식 브라우저를 사각으로 보냅니다 (오, 공포)!
3. 모서리를 수동으로 그려 넣는 구식 스퀘어 링 중 하나를 사용하십시오.

개인적으로 제 2 환경 설정은 실제로 질문에 답하지 않아서 고맙지 만 문제가 없습니다. 예전 브라우저의 외관 세부 사항입니다. 이걸 IE6에서 작동 시키려고하지 않습니까? (당신?).

그다지 좋지 않은 경우 옵션 1이 대부분의 사람들이 당시에 사용했던 전형적인 해결책입니다. 그러나 의미 상 좋지는 않습니다. 이미지를 축척해야하는 경우에는 문제가 있습니다.

그리고 옵션 3에 대한 언급이 적을수록 좋습니다.