html - CSS 圆圈在 ios 上看起来是椭圆形的

Question

我使用 CSS 创建了几个圆圈，用作我的 HTML 索引页上的文本输入。问题是当里面的字体比 CSS 圆圈大时，圆圈变成椭圆形。它只发生在 IOS 上。我已经在 Safari 和 Chrome 上测试了该页面，一切正常。没有要测试的安卓设备。我尝试过使用元标志和 webkit 属性，但没有成功。

有什么提示吗？

            input[type=text5]{
                    position: absolute;
                    left: 270px;
                    top: 340px;
                    display:block;
                    width:50px;
                    height:50px;
                    line-height:50px;
                    border: 2px solid #f5f5f5;
                    border-radius: 50%;
                    margin:0 auto;
                    color:#f5f5f5;
                    text-align:center;
                    text-decoration:none;
                    background: #464646;
                    box-shadow: 0 0 3px gray;
                    font-family:Verdana;
                    font-size:16px;
                    font-weight:bold;
                    -webkit-box-sizing:content-box;
                    -moz-box-sizing:content-box;
                    box-sizing:content-box;             
            }

大字体:

小字体

Answer 1

伙计们，我在玩了一下 CSS 属性后发现了。出于某种原因，iOS 正在为文本添加填充。有趣的是，所有桌面浏览器都没有添加填充。在任何情况下添加:padding: 0px; 解决它。