Abr*_*egh 5 html css iphone mobile-safari css3
这是一个参考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浏览器,它会使用这个奇怪的盒子呈现,当输入显示在顶部时,它会破坏圆角的错觉.不同颜色的背景.
Kev*_*sJr 15
我设法通过减少边界半径来解决这个问题.
如果边界半径大于元素高度的一半,则该错误似乎只出现.
所以如果-webkit-border-radius:20px; 确保你的元素至少有40像素高.
否则边框背景重叠导致可怕的丑陋盒子.