HTML:输入框默认/计算的内容高度因浏览器而异

Question

假设我有以下代码

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

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

请参阅http://jsbin.com/qudorugoguya/1/edit?html,css,output上的现场演示

据我所知,总高度=内容高度+填充顶部+填充底部+(边框宽度x 2).

http://www.w3.org/TR/CSS21/box.html#box-dimensions

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

对于不同的浏览器,content height具有以下值:

• Chrome 38:34px
• Firefox 33:35px
• IE 11:34.5px
• IE 8:35px

注意:我从每个浏览器的内置开发人员工具中获取了值

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

Answer 1

不行，除了你说的方法之外，没有其他办法了。甚至 CSS 重置/标准化器也会在幕后使用这些方法。

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