font-size 对 input 的影响

1. 开始

在不限定 <input> 宽度的情况下,font-size 是会影响 <input> 的宽度的。以下的试验是在 macOS 的 Chrome 中进行的。

默认情况下的 <input> 宽度是 132px,font-size 的值为 12px

当我们以 12px 为界,先减小 font-size 的值,这时候会发现无论是 <input> 的宽度,还是输入里面的字符大小,都是是不变的。

这个现象验证了 Chrome 为了安全性,对字体大小是有保护的。

接着我们回到边界来逐步增大 font-size,来观察下宽度的变化(格式:字体大小 - <input> 宽度):

  • 12px - 132px
  • 13px - 133px
  • 14px - 153px
  • 15px - 154px
  • 16px - 173px

从罗列的数值中发现,每增大 2px,宽度都会增加 20px。

我在其中输入循环输入 1~9 数字,发现宽度和字体的联系是:在偶数的字体大小下,保证可以显示 18 个数字

最后我尝试输入 100% 的字体大小,发现其等于 16px 的字体大小下的宽度。

当然字体大小除了影响宽度,对高度也是有影响的,这里就不赘述了。

2. 关于兼容性

后来我尝试了 Safari,发现宽度受字体大小的影响是一直的,但 Safari 对字体的大小没做限制,当字体大小会 0 的时候,<input>内容宽度也就为 0 了。

其他的区别还有:

  • 默认字体大小是 11px
  • 每次的字体调整对宽度对影响都很大(不像 Chrome 每 2px 跳一跳)
  • Safari 的宽度规则是能看到 21 个数字

3. 小结

每个浏览器的渲染规则都是不一样的,所以对样式的设置还是要详细些,尽量减少依靠渲染引擎的推算。

比如对于 <input> ,不仅需要设置好字体大小,还要设置好字体(对高宽也有影响)。最好还要设置宽度(width 或者 flex 布局等),不然在一个定宽对结构下可能就会出现问题了。

发布了44 篇原创文章 · 获赞 0 · 访问量 1399
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览