我用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;
}
大字体:
小字体
2条答案
按热度按时间yeotifhr1#
好吧,伙计们,我在玩了一点CSS属性后发现了。由于某种原因,iOS正在向文本添加填充。有趣的是,没有桌面浏览器添加填充。在任何情况下添加:
padding: 0px;
解决了这个问题。s8vozzvw2#
One More Way
如果您在iOS中对椭圆形元素应用CSS3属性
box-sizing:border-box;
,问题将得到解决。