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

Posted 2023-04-18

【中文标题】HTML：输入框默认/计算的内容高度因浏览器而异

【英文标题】：HTML: is input box default/calculated content height different across browsers

【发布时间】：2014-12-13 03:29:33

【问题描述】：

假设我有以下代码

.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观看现场演示

我理解总高度 = 内容高度 + padding-top + padding-bottom + (border-width x 2)。

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

然而，当height 属性没有被赋值时，计算出来的内容高度似乎会随着浏览器的不同而变化。好像它是字体大小 + 一些与字体大小成比例的任意像素数的结果。

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

Chrome 38：34 像素 Firefox 33：35 像素 IE 11：34.5px IE 8：35 像素

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

有没有办法在浏览器之间获得一致的值无需设置height 属性或line-height 属性？

【问题讨论】：

请注意，CSS Reset & Normalizer 与此问题无关。确实，即使您在此示例中添加了 CSS 重置，行为也会有所不同，请自行查看 jsbin.com/vecugikuyivo/1/edit

CSS 重置/规范化样式表应该在布局、字体、大小等方面提供跨浏览器的一致性。但是，到目前为止，我已经尝试了 6 种不同的样式，虽然它们都在各种事情上取得了成功，但它们都不能解决这个特定的问题。所以，好问题！我已经 +1 并收藏了它，因为我希望看到一个引用特定样式表的答案，该样式表实际上在所有浏览器中规范化该输入的高度......

+1 用于测试 6 种不同的重置/归一化器

您尝试过 CSS 重置或 CSS 规范化器吗？

【参考方案1】：

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

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