Chrome中的CSS输入高度

问题描述 投票:2回答:3

如果我用以下CSS创建一个input

input {
  border: none;
  font-family: arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
  padding: 0;
}

我希望input的高度为16px,但Chrome开发者工具的高度为18px。

Chrome Developer Tools calculated box model

在Firefox中,高度为16px。

导致Chrome中额外的2px的原因是什么?

小提琴:https://jsfiddle.net/fh7upk0n/

我知道如果我想要一个固定的高度我必须使用高度,但我想知道2px来自哪里。

html css google-chrome
3个回答
1
投票

我的猜测是Chrome增加1px和1px以使文本可读。

当然,您可以通过添加强制chrome来显示16px高度输入

height: 16px;

但是一如既往,不要指望line-height来确定其潜在元素的大小。


2
投票

你应该使用高度而不是行高

高度 - 容器的垂直测量

line-height-从第一行文本顶部到第二行文本顶部的距离


0
投票

我认为Chrome中存在一些渲染错误。正如您所看到的,当我将font-size,line-height和height设置为18px时,中文字符的上边缘被切割,底部有一些额外的空间。 see the picture

© www.soinside.com 2019 - 2024. All rights reserved.