html - Chrome 上的文本输入 : line-height seems to have a minimum

Question

我试图在 Chrome 中使用相同的值、带占位符的文本输入和跨度来设置文本输入的样式。具体来说，我想独立于字体大小来控制行高。

但是，输入值似乎有某种最小行高(或引起类似影响的东西)，这似乎以某种方式将文本向下推，从而阻止了相同的样式。

示例 HTML:

<div>
  <input type="text" value="Text">
  <input type="text" placeholder="Text">
  <span>Text</span>
</div>

CSS:

div {
  line-height: 50px;
  font-family: Arial;
}

input,
span {
  font-size: 50px;
  line-height: 50px;
  height: 50px;
  width: 100px;
  padding: 0;
  min-height: 0;
  display: inline-block;
  font-family: inherit;
  border: 2px solid red;
  overflow: hidden;
  vertical-align: top;
}

结果可以在

看到

http://plnkr.co/edit/oHbhKDSPTha8ShWVOC7N?p=preview以及来自 Linux 上的 Chrome 44.0.2403.155(64 位)的以下屏幕截图:

奇怪的是，占位符的样式似乎符合所需的行高，而输入的文本值的位置不同。此时我不关心占位符的颜色。

如何设置所有 3 个元素的样式，使文本位于同一位置，我使用自定义行高？

我知道我可以将行高设置为 normal 或 1.2，或者减小字体大小，以使元素显示相同，但​​它们不会我正在寻找的视觉外观。

Answer 1

我想我做到了!!!

在我的测试中，行高似乎必须至少是字体大小的 ~115%，所以如果你想要 50px 高的元素，你必须有 ~43px 才能让所有的东西排列起来:

图 1. 字体大小为 50 像素行高的 86%。一切正常，但不符合 OP 要求的 50px 字体大小。

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 43px Arial;
    line-height: 50px;
    padding: 0;
    vertical-align: middle;
	width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

如果将字体大小增加到所需的 50px，则输入框所遵循的最小行高为 ~58px。任何通过垂直对齐来抵消它的尝试都对输入没有影响，但我们可以修复元素高度并 overflow hidden 以提供一致的(尽管不是完全体面的)外观:

图 2. 50 像素的文本强制行高为 58 像素，并隐藏了溢出。

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 50px Arial;
    line-height: 58px;
    padding: 0;  
    height:50px;
    vertical-align: top;
    width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

关闭，但没有雪茄。但这让我开始思考——也许伪元素的限制更少？我发现您甚至可以在 input 中设置 input::first-line 伪代码的样式，并且这将尊重高度、字体大小, 行高和垂直对齐!

因此瞧!

图 3. 获胜的第一行伪元素!

input, span {
    border: 2px solid red;
    display: inline-block;
    font: 50px Arial;
    line-height: 50px;
    height: 50px;
    padding: 0;
    vertical-align: middle;
    width: 100px;
    outline-style:none;
    box-shadow:none;
    overflow:hidden;
    /* optional - to include the borders in the element size: 
    box-sizing:border-box;
    */
}
input::first-line, span::first-line {
    vertical-align: middle;
}
/* weirdly the placeholder goes black so we have to recolour the first-line */
input::-webkit-input-placeholder::first-line {
    color:grey;
}

<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>

这里有一个 jsFiddle，所以你可以看到我的锻炼。 ;)

https://jsfiddle.net/romz58cc/4/