为什么会这样？

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。

有一些事情可以支持这一点：

<强> 1。您可以看到插入符号的大小

点击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的{{1}}。这反过来会使插入符号变小并阻止它人为地增加line-height的{{1}}。

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

Answer 3

我已经在输入框中尝试了一些线高，并认为我已经得出某种结论。

如果输入框中字体的大小等于或超过行高，则框似乎会更改大小及其内容（但不占位符）也会更改。如果从示例中删除高度，这很明显。

＆＃13;

  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;
  }

＆＃13;

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

＆＃13;

如果将font-size设置为小于行高，则不再看到奇怪的行高效果，并且所有文本都位于同一行：

＆＃13;

  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: 45px;
  }

＆＃13;

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

＆＃13;

这是一个并排的例子：http://codepen.io/Jivings/pen/OyOKOV

我希望这会有所帮助，至少让您更接近自己CSS中的解决方案！

Answer 4

试试这个

根据链接：Firefox line-height issue with input fields

除非您更改字体大小
，否则
输入的行高不会发生变化

所以减小字体大小：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; 

}

Answer 5

行高为1.2的值（即字体大小的120％）在chrome

中完美运行

http://plnkr.co/edit/rJmXLRrGFpi46Vv5THm5?p=preview

  div, input, span {
      line-height: 1.2;
  }

我所做的唯一改变是将50像素的两行高度更改为1.2。它没有打破布局，三个元素排列很好。

所以你的原始代码在firefox中工作正常。

Answer 6

SO问题 - 33185205

OP

DEMO

FORK

Explination： <input>是替换元素，因此其内容不会由用户代理提供。

有关详细信息，请参阅：HTML5: Non-replaced vs. replaced element?

解决方案：

请参阅FORK或代码段

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

同等地设置height和line-height <input>。（例如50px）
将font-size设置为小于height和line-height的尺寸。（例如40px）
将top或bottom的{{1}}和padding设置为先前值之差除以2.（例如（（50px - 40px）/ 2） = 5px）

Answer 7

根据以下评论进行了更新

为了对每个元素使用相同的*, *: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; }，我将CSS更新为：

height

基本上，即使您使用相同的文件line-height和{{1}}，即使您更改字体大小，文本也会正确显示。字体大小必须至少比高度和行高大10px左右，否则会再次偏斜。

你可以here。希望有所帮助。

Answer 8

由于变音符号不是传统字体大小定义的一部分，因此您无法使用行高=字体大小。甚至ASCII包括一些变音符号（例如U0060）。变音符也可以应用于大写字母，你甚至不需要模糊的unicode扩展，latin1就足够了（例如U00C0）。

如果字体设计正确且包含box drawing块，则可以轻松检查 - 框绘制线应该是连接的，因此例如U2502将为您提供字体使用的实际精确最大高度。它的高度将超过A或通常用于定义字体大小的其他拉丁语帽之一。（不幸的是因为水平线也应该是连接的，所以盒子绘图块只能在等宽字体中找到）。

在分配字体高度之后，文本堆栈仍然必须保留一些放置变音符号的位置（除了字母变换的字体大小之外，还有字体格式的元数据定义特定字体将消耗多少）。通常这个地方与行间距重叠。当存在单行时，它显示为行高＆gt;字体大小

计算字体大小的确切最小行高需要深入了解所使用的字体（通过特定的lib，类似于opentype.js）以及用于呈现每个元素的文本引擎的特征。根据该文本引擎的进步，它将使用opentype规范允许的更多（或更少）技巧，以最大限度地减少复杂国际环境中的空间浪费。

例如，除非文本堆栈实现了对opentype基表opentype spec的处理，否则实际增加的间距可以增长到巨大的值（超过西部拉丁语的15/20％，并在其他答案中给出）因为人们使用支持Vietnamese的字体，或者喜欢将许多变音符号堆叠在一起的其他脚本（即使您的浏览器设法使用通用字体呈现此页面，它也可能会垂直压缩变音符号当安装了越南语字体时）

同样，文本堆栈知道您放在页面上的文本是否包含复杂的变音符号。但是对于输入元素，它没有这样的信息，这取决于用户将键入的内容。因此，它需要保守，并为您选择的字体支持的脚本保留最坏情况的行高。

垂直输入高度分配不足的网站设计非常普遍，因为网站/ js lib /浏览器作者生活在96dpi无变音符拉丁语世界中，并认为最小化垂直高度是美丽的。一旦用另一种语言查看网站就会中断，稍微复杂的unicode字形，稍微不同的字体或稍微不同的文本缩放级别（由于hidpi或仅仅是用户近视）。普通文本通常很好，因为设计师并没有试图将它强制放在尺寸过小的固定像素盒子里。

当输入字段大小由于某种原因而使用等宽字体时，输入字段大小调整也很常见，并且网页设计师假设无衬线字体和等宽字体之间存在一定比例，并试图修复＆＃34;它（通常是通过扩大monospace来扩展monospace，因为一些浏览器附带一个小的默认等宽线用于不明原因的遗留原因，即使它不是一般规则）。

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

8 个答案:

我想我已经做到了!!!

为什么会这样？

为什么插入符错？

可以做些什么？

SO问题 - 33185205

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

8 个答案:

我想我已经做到了!!!

为什么会这样？

为什么插入符错？

可以做些什么？

SO问题 - 33185205

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