我想我做到了！
在我的测试中，似乎line-height必须至少是font-size的115%，所以如果你想要50 px高的元素，你必须有~ 43 px的元素才能排列好：
x1c 0d1x的数据

• 图1.字体大小为50 px行高的86%。东西排成一行，但不符合OP要求的50 px字体大小。*

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>

如果您将字体大小增加到所需的50 px，则输入框所遵循的最小行高为~ 58 px。任何尝试使用垂直对齐来偏移此值的尝试都不会对输入产生影响，但我们可以修复元素高度并隐藏溢出，以给予一致的外观（尽管不完美）：

的

• 图2. 50 px文本迫使行高为58 px，并使用溢出隐藏进行裁剪。*

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/

为什么会这样？
这种不对齐是由插入符号引起的，因此我认为如果font-size和line-height是相同的，你不会找到一种方法来对齐文本。

为什么是插入符号出错？

插入符号的height大于文本，这导致对齐方式不正确。
有几件事支持这一点：

1.可以看到插入符号的大小

• 点击进入input并按住鼠标左键。上下拖动，你会看到文本会移动
• 从input, span中删除height: 50px;。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。插入符号现在将适合50pxheight

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>

怎么办？

由于没有办法对插入符号本身进行样式设置（使其变小），确保文本对齐的最有效方法是使用比line-height小的font-size。这反过来会使插入符号变小，并阻止它人为地增加input的line-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>

• 或者 * 您可以删除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>

我对输入框中的行高做了一些实验，我想我已经得出了一些结论。
如果输入框中的字体大小等于或超过行高，则框的大小会更改，其内容（但不是占位符）也会更改以适应。如果从示例中删除高度，这一点很明显。

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>

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

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

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

下面是一个并列的例子：http://codepen.io/Jivings/pen/OyOKOV
我希望这能有所帮助，至少能让你更接近你自己的CSS解决方案！

像这样试试
链接：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; 

}

字符串

行高为1.2值（即字体大小的120%）在Chrome中完美工作
http://plnkr.co/edit/rJmXLRrGFpi46Vv5THm5?p=preview

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

字符串
我做的唯一的改变是将两行50像素的高度改为1.2。它没有破坏布局，三个元素对齐得很好。
所以你的原始代码在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，即使你改变字体大小，文本也会正确地显示在彼此旁边。字体大小必须至少比高度和行高大10px左右，否则它会再次倾斜。
你可以see my updated JS.Fiddle here。希望能有帮助。

SO问题- 33185205

OP

DEMO
FORK的

解释：<input>是一个被替换的元素，所以它的内容不会被用户代理呈现。

详情请参阅：HTML5: Non-replaced vs. replaced element?

解决方案：

请参见FORK或Sniffy

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>

1.将<input> s的height和line-height设置为相等。（例如50 px）
1.将font-size设置为小于height和line-height的大小。（例如40 px）
1.将padding或border的top和bottom设置为之前值的差值除以2。（例如（（50 px-40 px）/ 2）= 5 px）

因为变音符号不是字体大小的传统定义的一部分，所以你永远不能让行高=字体大小。即使ASCII也包含一些变音符号（例如U 0060）。变音符号也可以应用于大写字母，你甚至不需要晦涩的Unicode扩展，latin1就足够了（例如U 00 C 0）。
当一个字体被正确设计并且包含box drawing块时，这可以很容易地被勾选--框画线应该是连接的，所以例如U2502将给予你字体使用的实际精确的最大高度。它的高度 * 将 * 大于A或通常用于定义字体大小的其他拉丁大写字母之一。（不幸的是，因为水平线也应该是连接的，所以框绘制块只能在等宽字体中找到）。
在分配了字体高度之后，文本堆栈仍然必须保留一些地方来放置变音符号（字体格式中有元数据，定义了除了变音符号的字体大小之外，特定字体将消耗多少）。通常这个地方与行距重叠。当只有一行时，它显示为行高>字体大小
计算字体大小的精确最小行高需要深入了解所使用的字体（通过特定的库，如opentype.js）和用于渲染每个元素的文本引擎的特性。根据该文本引擎的进步，它将使用更多（或更少）opentype规范允许的技巧，以最大限度地减少复杂国际情况下的空间浪费。
例如，除非文本堆栈实现了对opentype基表opentype spec的处理，否则实际增加的间距可能会增加到很大的值。（超过15/20%的典型西方拉丁语和其他答案）一旦使用支持越南语的字体，或其他喜欢将许多变音符号堆叠在一起的脚本（即使您的浏览器设法使用通用字体呈现此页面，与安装越南字体时相比，它可能会垂直压缩变音符号）
同样的，文本栈知道你放在页面上的文本是否包含复杂的变音符号。但是对于输入元素，它没有这样的信息，这取决于用户要输入什么。所以它需要保守，为你选择的字体支持的脚本保留最坏情况的行高。
垂直输入高度分配不足的破碎网站设计非常常见，因为网站/js lib/浏览器作者生活在96 dpi无变音符号的拉丁世界，并认为最小化垂直高度是美丽的。当网站以另一种语言查看时，稍微复杂的unicode字形，稍微不同的字体，或者稍微不同的文本缩放级别（由于hidpi或者仅仅是用户的近视度）。普通文本通常是可以的，因为设计者没有试图强迫它在一个过小的固定像素框中。
输入字段大小调整也很常见，当它出于某种原因使用等宽字体时，网页设计师假设sans serif和等宽字体之间有一定的比例，并试图“修复”它（通常通过扩大等宽字体，因为一些浏览器由于模糊的遗留原因而附带了一个小的默认等宽字体，即使它不是一般规则）。