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