Question

以下是参考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浏览器，它会使用这个奇怪的盒子呈现，这会破坏圆角的错觉。输入显示在不同颜色的背景之上。

http://cl.ly/1LUi/content

Answer 1

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

如果边界半径大于元素高度的一半，则该错误似乎只会出现。

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

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

Answer 2

来自网络的共识是，这是WebKit for iOS中的一个错误。请勿在iPhone上的border-radius text上使用input。

Answer 3

您是否考虑过使用带有border-radius？的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>

Answer 4

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

-webkit-box-shadow：0px 5px 10px rgba（0,0,0,0.5）;

尽管圆角显示得很好，但是在移动野生动物园中，盒子阴影根本不显示，即使它在桌面游猎中显示得很好。也许有-webkit-box-shadow风格允许半径指示符工作？你可以尝试一下，因为它对我有用。

您还可以尝试使用以下各个边框样式：

-webkit-边界左上半径 -webkit-边框右上角半径 -webkit-边框左下角半径 -webkit-边界右下半径

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

Answer 5

你如何输入{-webkit-border-radius：20px;概要：0; } 看结果.. :)）

为什么border-radius在MobileSafari中的文本输入上没有正常工作？

5 个答案: