CSS圆在ios上看起来像椭圆

7fhtutme  于 2023-03-25  发布在  iOS
关注(0)|答案(2)|浏览(93)

我用CSS创建了几个圆圈,我在HTML索引页面上用作文本输入。问题是,当里面的字体与CSS圆圈相比相对较大时,圆圈会变成椭圆形。这只发生在IOS上。我在Safari和Chrome上测试了页面,它非常好。没有Android设备测试。我尝试使用 meta标志和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;             
            }

大字体:

小字体

yeotifhr

yeotifhr1#

好吧,伙计们,我在玩了一点CSS属性后发现了。由于某种原因,iOS正在向文本添加填充。有趣的是,没有桌面浏览器添加填充。在任何情况下添加:padding: 0px;解决了这个问题。

s8vozzvw

s8vozzvw2#

One More Way

如果您在iOS中对椭圆形元素应用CSS3属性box-sizing:border-box;,问题将得到解决。

相关问题