![]()
的 CSS 圆角在第一代 iPhone 上
以下代码适用于所有桌面浏览器桌面上的Chrome和Safari以及我测试过的最新iPhone和所有Android设备。但是，在第一代 iPhone 和 iPhone 3G 中，
我在 iPhone 上用于圆角的其他 CSS（在
![]()
相关 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 中则不然。
The following code works in all desktop browsers Chrome and Safari on the Desktop as well as recent iPhones and all Android devices I've tested. However, in first-generation iPhones and the iPhone 3G, the top left corner of the <img> is not rounded.
The other CSS I have for rounding corners (on <h1> elements) on the iPhone seems to work fine on these older devices. It's just the rounding for the <img> element that does not work.
Relevant 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);
Relevant HTML:
<div id="menu-container"></div>
I am aware of the "rounded corners don't show up if the radius is greater than half the image height or width" issue, and that's not what is going on here. The radius is a tiny fraction of the image size.
JSFiddle: http://jsfiddle.net/RaK3T/
(Wow, JSFiddle actually works on iPhone 3G, that's awesome!)
UPDATE: I suppose it very well might be the iOS version that matters more than the phone model. It appears to work fine in iOS v4.3.2, but not in iOS v3.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
听起来您在某些较旧的浏览器中遇到了问题，即边框被绘制为前景图像下方的逻辑层。
效果是确实绘制了圆形边框，但前景图像随后放置在它们的顶部，并且没有被剪裁。这显然只影响
![]()
这个问题在几年前曾是一个大问题。它影响了一些浏览器，但没有影响其他浏览器，但对于旧版本的 Firefox 和大多数 Webkit 浏览器来说，这肯定是一个问题。
问题很快就被发现并得到了解决（如果没记错的话，Webkit 比 Firefox 快一些），然后我们就继续前进。
但对于需要支持这些浏览器旧版本的网络开发人员来说，这仍然是一个问题。
共有三种可行的解决方案：
background-image样式代替前景![]()
就我个人而言，我更喜欢选项 2，我很欣赏它实际上并没有回答问题，但我对此没有任何问题：它是旧浏览器上的装饰细节；你不会尝试让这个在 IE6 上运行，对吗？ （你会吗？）。
如果这对您来说还不够好，那么选项 1 就是当时大多数人采用的典型解决方案。但在语义上并不好，并且如果您需要缩放图像等，则会出现问题
。关于选项 3 说得越少越好。
It sounds like you're running into an issues in certain older browsers, whereby the border is drawn as a logical layer beneath the foreground image.
The effect is that the rounded borders are indeed drawn, but the foreground image is then placed on top of them, and is not clipped. This obviously only affects the
<img>tag, since it's the only tag that has foreground images.This issue was a big deal a few years ago. It afflicted some browsers but not others, but certainly for older versions of Firefox and most Webkit browsers, it was an issue.
The problem was quickly spotted and was fixed (somewhat quicker with Webkit than Firefox, if memory serves), and we all moved on.
But it is still an issue for web developers needing to support older versions of these browsers.
There are three workable solutions:
background-imagestyle instead of a foreground<img>.Personally my preference is for option 2, I appreciate it doesn't actually answer the question, but I don't have an issue with it: it's a cosmetic detail on old browsers; you wouldn't try to get this working on IE6, would you? (would you??).
If that isn't good enough for you then option 1 is the typical solution that most people went with at the time. But isn't good semantically, and has issues if you need to scale the image, etc.
And the less said about option 3, the better.