为什么边界半径在 MobileSafari 中的文本输入上不能正常工作？答案

【问题标题】：Why doesn't border-radius work properly on text inputs in MobileSafari?为什么边界半径在 MobileSafari 中的文本输入上不能正常工作？
【发布时间】：2011-03-02 07:01:22
【问题描述】：

这是一个参考 HTML 文档：

<!DOCTYPE html>
<html>
    <head>
    <style>
body { background-color: #000; }
input { -webkit-border-radius: 20px; }
    </style>
    </head>
    <body>
        <input type="text" value="text" />
    </body>
</html>

border-radius 在基于 Safari/WebKit 的桌面浏览器上呈现良好，但在“MobileSafari”变体，即 iPhone 和 iPad 浏览器上，它呈现出这个奇怪的框，它破坏了输入时圆角的错觉正在显示在不同颜色的背景之上。

【问题讨论】：

标签： html iphone mobile-safari css

【解决方案1】：

你输入 { -webkit-border-radius: 20px; 怎么样？大纲：0； } 看看结果.. :)

【讨论】：

【解决方案2】：

我设法通过减小边界半径来解决这个问题。

该错误似乎仅在边框半径大于元素高度的一半时才会出现。

所以如果 -webkit-border-radius: 20px;确保您的元素至少有 40 像素高。

否则边框背景重叠会导致可怕的丑陋框。

【讨论】：

KevBurnsJr：你是个了不起的人，谢谢。我玩了一段时间，但无法让它们在 iPad 上看起来正确。不过，您的解决方案完全有道理，因为它是数学，如果两个角都超过高度的一半，则半径重叠。 iOS 以不同于 Safari 的方式呈现这些是否是一个错误，我不确定，也许不太直观，但似乎 iOS 对这种特殊情况更加严格。感谢您发布便条，我可以继续讨论其他 iPad 问题。 ;)
感谢您的回答，非常有帮助。我想补充一下，这是 iOS 5 之前的问题。所以我们不能对 border-radius 偷懒。

【解决方案3】：

我在我的网站中没有看到这个问题，我正在使用 8px 的 -webkit-border-radius 和在正文样式中分配的背景图像。我的输入框也有这种风格：

-webkit-box-shadow: 0px 5px 10px rgba(0,0,0,0.5);

虽然圆角显示得很好，但盒子阴影在移动 safari 上根本不显示，即使它在桌面 safari 上显示得很好。也许拥有 -webkit-box-shadow 样式允许半径指示符工作？您可以尝试一下，因为它对我有用。

您也可以尝试使用以下单独的边框样式：

-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-left-left-radius -webkit-border-bottom-right-radius

当我只使用 -webkit-border-radius 作为选择框时，它在移动 safari 中无法正确呈现（桌面版本也很好）。当我改为使用单独的样式设置时，效果很好。

【讨论】：

我很确定我也尝试过，当我遇到这个问题时。

【解决方案4】：

您是否考虑过使用带有边框半径的 span/div/other 容器来包装文本字段？

<style>
    body { background-color: #000; }
    .inputWrapper { -webkit-border-radius: 20px; }
</style>

...

<body>
    <div class="inputWrapper"><input type="text" value="text" /></div>
</body>

【讨论】：

【解决方案5】：

网络上的共识是，这是 iOS 版 WebKit 中的一个错误。不要在 iPhone 上的 text inputs 上使用 border-radius。

【讨论】：

是的，这是一个错误，但有一个解决方法。见我上面的回答。