如果我用以下CSS创建一个input
input {
border: none;
font-family: arial, sans-serif;
font-size: 16px;
line-height: 16px;
padding: 0;
}
我希望input
的高度为16px,但Chrome开发者工具的高度为18px。
在Firefox中,高度为16px。
导致Chrome中额外的2px的原因是什么?
小提琴:https://jsfiddle.net/fh7upk0n/
我知道如果我想要一个固定的高度我必须使用高度,但我想知道2px来自哪里。
我的猜测是Chrome增加1px和1px以使文本可读。
当然,您可以通过添加强制chrome来显示16px高度输入
height: 16px;
但是一如既往,不要指望line-height
来确定其潜在元素的大小。
你应该使用高度而不是行高
高度 - 容器的垂直测量
line-height-从第一行文本顶部到第二行文本顶部的距离
我认为Chrome中存在一些渲染错误。正如您所看到的,当我将font-size,line-height和height设置为18px时,中文字符的上边缘被切割,底部有一些额外的空间。 see the picture