Chrome上的文字输入:行高似乎最​​小

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.字体大小为50px行高的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.任何使用垂直对齐来抵消此操作的尝试都不会影响输入,但我们可以修复元素高度并隐藏溢出以提供一致(尽管不完全可敬)的外观:

图2. 50px文本强制行高为58px,其中包含溢出隐藏的剪辑.

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::first-line即使在一个内部也可以设置伪样式  input,这将尊重高度,字体大小,行高和垂直对齐!

瞧!

图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/

Answer 2

为什么会这样？

这种错位是由插入符导致的,因此我认为如果font-size和line-height相同的话,你会找不到对齐文本的方法.

为什么插入符号错了？

插入符号height大于导致对齐倾斜的文本.

有一些东西支持这个:

你可以看到插入符号的大小

• 单击input并按住鼠标左键.向上和向下拖动,您将看到文本将移动
• height: 50px;从中移除input, span.input现在的意志大小将增加到height插入符号

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

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

2.占位符文本已正确对齐

• 占位符文本不受插入符影响,因此正确对齐
• 只要文本被添加到input对齐方式就会被抛弃

具有较大插入符的结果height是,line-height被人为地增加导致文本是脱节.

这可以通过以下方式证明:

• 更改line-height到58px.占位符文本的对齐方式span将与input

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

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

• 更改font-size到45px.插入符号现在适合50px height

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  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;
}

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

可以做些什么？

由于没有办法样式插入符号本身(使其变小),确保对齐文本的最有效的方法是使用一个font-size比较小line-height.这将反过来使插入符小,从人为地增加了阻止它line-height的input.

div {
  line-height: 50px;
  font-family: Arial;
}
input, span {
  font-size: 45px;
  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;
}

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

或者你可以删除height并只指定一个line-height等于height插入符号:

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

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