javascript - 第一代 iPhone 上 <img> 的 CSS 圆 Angular

Question

以下代码适用于桌面上的 所有桌面浏览器 Chrome 和 Safari，以及最近的 iPhone 和我测试过的所有 Android 设备。然而，在第一代 iPhone 和 iPhone 3G 中，<img> 的左上角不是圆形的。

我在 iPhone 上用于圆 Angular (在 <h1> 元素上)的其他 CSS 似乎在这些旧设备上运行良好。这只是 <img> 的舍入无效的元素。

相关 Javascript:

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>

我知道“如果半径大于图像高度或宽度的一半，则圆 Angular 不显示”问题，这不是这里发生的事情。半径只是图像大小的一小部分。

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

(哇，JSFiddle 居然可以在 iPhone 3G 上运行，太棒了!)

更新:我认为 iOS 版本很可能比手机型号更重要。它似乎在 iOS v4.3.2 中运行良好，但在 iOS v3 中却不行。

Answer 1

听起来您在某些较旧的浏览器中遇到了问题，边框被绘制为前景图像下方的逻辑层。

效果是确实绘制了圆 Angular 边框，但是前景图像随后被放置在圆 Angular 边框之上，并且没有被剪裁。这显然只影响 <img>标签，因为它是唯一具有前景图像的标签。

这个问题在几年前是个大问题。它会影响某些浏览器，但不会影响其他浏览器，但对于旧版本的 Firefox 和大多数 Webkit 浏览器来说，这无疑是一个问题。

问题很快就被发现并修复了(如果没记错的话，Webkit 比 Firefox 快一些)，我们都继续前进。

但对于需要支持这些浏览器旧版本的网络开发人员来说，这仍然是一个问题。

存在三种可行的解决方案:

1. 使用 background-image样式而不是前景 <img> .
2. 忽略这个问题，让旧版浏览器使用方 Angular (哦，太恐怖了!)。
3. 使用任何一种手动绘制圆 Angular 的老式圆 Angular 技巧。

就我个人而言，我更喜欢选项 2，我很欣赏它实际上并没有回答这个问题，但我对此没有意见:它是旧浏览器上的装饰细节；你不会试图让它在 IE6 上工作，对吗？ (你会吗？？)。

如果这对您来说还不够好，那么选项 1 是当时大多数人采用的典型解决方案。但是在语义上不是很好，如果你需要缩放图像等就会有问题。

关于选项 3 的说法越少越好。