Chrome上的文字输入:行高似乎有最小值 [英] Text input on Chrome: line-height seems to have a minimum
问题描述
我正在尝试在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，或者减小字体大小，以使元素看起来相同，但是它们不会具有我想要的视觉外观./p>
我认为我已经做到了！
在我的测试中，行高似乎必须至少是字体大小的〜115％，因此，如果您想要50px高的元素，则必须将〜43px的内容对齐:
图1.字体大小50px行高的86％.东西排成一行，但不符合OP要求的50px字体大小.
如果将字体大小增加到所需的50px，则输入框应遵守的最小行高为〜58px.尝试使用垂直对齐方式补偿此错误对输入没有任何影响，但是我们可以固定元素的高度并隐藏溢出以提供一致的外观(尽管并不完全受人尊敬): 图2.50px的文本强制行高为58px，并被隐藏的溢出部分剪裁.
关闭，但没有雪茄.但是，这让我开始思考-也许伪元素可能没有那么严格的限制?我发现即使在 因此，瞧！ 图3.赢得胜利的第一线伪元素！
这里有很多jsFiddle，所以您可以看到我的工作. ;) https://jsfiddle.net/romz58cc/4/ I'm trying to style a text input with a value, text input with a placeholder, and a span, identically in Chrome. Specifically, I would like to control the line-height independently of the font size. However, there seems to be some sort of minimum line-height (or something causing a similar affect) on the input value, that seems to push the text down somehow that prevents the identical styling. Example HTML: CSS: And the results can be seen at http://plnkr.co/edit/oHbhKDSPTha8ShWVOC7N?p=preview
and in the following screen shot from Chrome 44.0.2403.155 (64-bit) on Linux: Strangely, the placeholder seems to be styled with the desired line-height, while the text value of the input is positioned differently. I'm not concerned with the colour of the placeholder at this point. How can I style all 3 elements so the text is in the same position, where I'm using a custom line-height? I understand I can just set the line-height to In my testing it seems that line-height must be at least ~115% of font-size, so if you want 50px high element you must have ~43px for things to all line up: Fig 1. Font-size 86% of 50px line-height. Things line up but are not honouring the 50px font size requested by OP.
If you increase the font size to the desired 50px then the minimum line-height respected by the input box is ~58px. Any attempt to offset this with vertical alignment had no affect in the input but we can fix the element height and hide the overflow to give a consistent (albeit not entirely respectable) appearance: Fig 2. 50px text forcing a line height of 58px which is clipped with overflow hidden.
Close, but no cigar. But that got me thinking - perhaps a pseudo element might be less restrictive? I found that that you can style the Thus voilà! Fig 3. First-line pseudo element for the win!
Here's a jsFiddle of the lot so you can see my working out. ;) https://jsfiddle.net/romz58cc/4/ 这篇关于Chrome上的文字输入:行高似乎有最小值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
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>
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伪样式，并且 将尊重高度，字体大小，行高和垂直对齐！
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> <div>
<input type="text" value="Text">
<input type="text" placeholder="Text">
<span>Text</span>
</div>
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;
}
normal or 1.2, or reduce the font size, to make the elements appear identically, but they would not have the visual appearance I'm looking for.I think I've done it!!!
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>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 pseudo even within an input and that this will respect the height, font size, line-height and vertical alignment!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>
