Question

我们说我有以下代码

＆＃13;

.username {
  font-size: 30px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 2px solid #E0E0E0;
}

＆＃13;

<input class="username" type="text" />

＆＃13;

上的实时演示

据我所知，总高度=内容高度+填充顶部+填充底部+（边框宽度x 2）。

但是，如果未为height属性分配值，则计算出的内容高度似乎会从浏览器更改为浏览器。好像是字体大小的结果+一些与字体大小成比例的任意数量的像素。

对于不同的浏览器，content height具有以下值：

注意：我从每个浏览器获得了值＆＃39;内置开发人员工具

有没有办法在不设置height属性和line-height属性的情况下从浏览器到浏览器获取一致的值？

Answer 1

不，除了你提到的方法之外，没办法做到这一点。即使CSS重置/规范化器也会在幕后使用这些方法。

如果跨浏览器内容高度对您非常重要，我建议您使用图片。