第一代iPhone上使用CSS实现<img>的圆角效果

Question

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

我在iPhone上为圆角（<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>

我知道“如果圆角半径大于图像高度或宽度的一半，则不会显示圆角”的问题，并且这不是此处发生的情况。 半径仅占图像大小的一小部分。

JSFiddle：http://jsfiddle.net/RaK3T/ （哇，JSFiddle在iPhone 3G上真的可以使用，太棒了！）

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

- Trott

---

我在测试过的所有桌面浏览器中都可以运行以下代码。你是指在所有WebKit浏览器中吗？ - c69

是的！我在我的实际应用程序中使用的代码也适用于Firefox，但是我在这里简化的代码仅适用于WebKit浏览器。我会更新问题。很好地发现了。 - Trott

Answer 1

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

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

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

问题很快被发现并得到解决（如果我没记错的话，Webkit比Firefox更快），我们都继续前进。

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

有三种可行的解决方案：

1. 使用background-image样式而不是前景<img>。
2. 忽略这个问题，让旧浏览器保持方形边角（哦，可怕！）。
3. 使用任何一种旧式的圆角hack，手动绘制边角。

就个人而言，我更喜欢选项2。我明白它实际上并没有回答问题，但我对此并不反感：这只是旧浏览器上的一个美观细节问题；你不会想要在IE6上使其正常工作，对吧？（你会吗？？）

如果这对你来说还不够好，那么选项1是大多数人当时选择的典型解决方案。但这并不好从语义上理解，而且如果你需要缩放图像等，它也会出现问题。

至于选项3，最好少提。

- Spudley