Chrome上的文本input：行高似乎有一个最小值
我正在尝试使用相同的方式在文本input中使用值，文本input的占位符和跨度。 具体来说，我想独立于字体大小来控制行高。
但是，input值似乎存在某种最小行高（或类似的影响），似乎以某种方式将文本向下推，以防止相同的样式。
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位）中的以下屏幕截图：
奇怪的是，占位符似乎是与所需的线高度，而input的文本值定位不同。 在这一点上，我并不关心占位符的颜色。
我如何devise所有3个元素，使文本处于相同的位置，我正在使用自定义行高？
我知道我可以设置行高为normal或1.2 ，或减小字体大小，使元素显示相同，但他们不会有我正在寻找的视觉外观。
我想我已经做到了！
在我的testing中，似乎行高必须至less是字体大小的〜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>
为什么发生这种情况？
这个错位是由插入符号造成的，因此我不认为如果font-size和line-height相同，您将findalignment文本的方法。
为什么插入错误？
插入符号的height大于导致alignment偏斜的文本。
有几件事支持这个：
你可以看到插入符的大小
- 点击
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>
我在input框中做了一些试验，认为我得出了一些结论。
看来，如果在input框中的字体的大小等于或超过行高，那么该框改变大小和其内容（但不是占位符）的改变也适合。 这是显而易见的，如果你从你的例子中删除高度。
input, span { padding: 0; margin: 0; width: 100px; padding: 0; min-height: 0; display: inline-block; font-family: inherit; border: 2px solid red; vertical-align: middle; } input, input::-webkit-input-placeholder, span { line-height: 50px; font-size: 50px; }
<input type="text" value="Text"> <input type="text" placeholder="Text"> <span>Text</span>
像这样尝试
根据链接： Firefoxinput字段的行高问题
input的行高不会改变，除非你改变字体大小
所以减less字体大小：50px到45px它会看起来不错。
代码如下
div { line-height: 50px; font-family: Arial; } span,input[type="text"],input[placeholder]{ height: 50px; width: 100px; padding: 0; min-height: 0; display: inline-block; font-family: inherit; border: 2px solid red; overflow: hidden; vertical-align: top; font-size:45px; } ::-webkit-input-placeholder { color:#000000; }
行高度为1.2的值（这是字体大小的120％）在铬合金中完美地工作
http://plnkr.co/edit/rJmXLRrGFpi46Vv5THm5?p=preview
div, input, span { line-height: 1.2; }
我做的唯一的变化是将50个像素的两个线高度改变为1.2。 它没有打破布局，三个元素很好地alignment。
所以你的原始代码在Firefox中工作正常。
根据下面的评论更新
为了对每个元素使用相同的line-height ，我更新了CSS：
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } div { line-height: 50px; font-family: Arial; } input, span { border: 2px solid red; display: inline-block; font: 50px Arial; height: 60px; line-height: 60px; padding: 0; vertical-align: middle; width: 100px; } input { padding-top: 3px; }
基本上，如果使用相同的包含height和line-height ，则即使您更改字体大小，文本也可以正确显示。 字体大小必须至less比高度和行高大10px左右，否则会再次偏斜。
你可以在这里看到我更新的JS.Fiddle 。 希望有所帮助。
SO问题 – 33185205
OP
DEMO
叉子
Explination： <input>是被replace的元素，所以它的内容不会被用户代理渲染。
有关详细信息，请参阅： HTML5：非replace元素与replace元素？
解答 ：
请参阅FORK或代码段
html { height: 100vh; width: 100vw; font: 400 10px'Arial'; } body { height: 100%; width: 100%; background-color: grey; color: #111; } #form { display: inline-table; } .box { display: table-row; } span, input { font: inherit; font-size: 40px; /* */ height: 50px; /* */ line-height: 50px; /* */ width: 100px; display: table-cell; outline: 2px solid red; border: 5px solid transparent; /* */ padding: 0; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <form id="form"> <div class="box"> <input id="in1" type="text" placeholder="Text" value="Text"> <input id="in2" type="text" placeholder="Text" value=""> <span>Text</span> </div> </form> </body> </html>
由于变音符号不是字体大小的传统定义的一部分，因此不能有行高=字号。 即使ASCII包含一些变音符号（例如U0060）。 变音符号也可以应用于大写字母，你甚至不需要晦涩的unicode扩展名， latin1就足够了（例如U00C0）。
当字体devise正确并且包含方块图时，可以很容易地检查 – 方块图线应该是联结的，例如U2502会给出字体实际使用的最大高度。 它的高度将超过A或其他通常用于定义字体大小的拉丁帽。 （不幸的是，因为水平线也被认为是联结的，所以盒子图块只能在等宽字体中find）。
在分配字体高度之后，文本堆栈仍然需要保留一些放置变音符号的地方（字体格式中的元数据定义了特定字体除了变音符号的字体大小之外还要消耗多less）。 通常这个地方与行间距重叠。 当有一行时，它显示为行高>字体大小
计算字体大小的精确最小行高需要深入了解所用字体（通过特定的lib，类似于opentype.js）以及用于呈现每个元素的文本引擎的特性。 根据这个文本引擎的进步，它将使用更多（或更less）的opentype规范所允许的技巧来最小化在复杂的国际环境中的空间浪费。
例如，除非文本堆栈实现opentype基本表opentype spec的处理，否则一旦使用字体，实际添加的间距可以增长到巨大的值（超过西方拉丁文的15％/ 20％，并在其他答案中）支持越南语或其他脚本，喜欢堆叠许多变音符号（即使您的浏览器设法使用通用字体来呈现此页面，与安装越南语字体时相比，它可能会垂直压缩变音符号）
同样，文本堆栈也知道您在页面上放置的文本是否包含复杂的变音符号。 但是对于一个input元素，它没有这样的信息，这取决于用户input的内容。 所以它需要保守，并保留所选字体所支持的脚本的最差行高。
垂直input高度分配不足的破坏性网站devise非常常见，因为网站/ js lib /浏览器作者生活在96dpi无音调的拉丁世界中，并且认为垂直高度最小化是美丽的。 一旦用另一种语言查看该网站，该网站就会中断，稍微更复杂的unicode字形，稍微不同的字体或略微不同的文本缩放级别（由于hidpi或仅用户近视）。 正常的文本通常是很好的，因为devise者没有试图强迫它在一个小尺寸的固定像素框内。
当input字段大小因为某种原因而使用等宽字体时，input字段大小也是常见的，并且网页devise师假设了sans serif和monospace之间的一些比率，并试图“固定”它（通常通过放大等宽字体，因为某些浏览器即使这不是一个通用的规则，但由于缺乏传统的原因，它会附带一个小的默认等宽字体）。
