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
布局等),不然在一个定宽对结构下可能就会出现问题了。