Question

当line-height显示时，浏览器忽略样式flex。即使拥有其他组件，line-height或inputs，text areas仍然会被忽略。

为什么忽略line-height？

请参阅运行演示here。

<html>
  <head>
  </head>
  <body>
    <h1 style="line-height: 200px; background: blue;  display: flex"><input value="expected large line-height - success." style="width: 250px"/>ALIK</h1>
    <h1 style="line-height: 200px; background: red;  display: flex"><input value="expected large line-height - FAILURE!!!" style="width: 250px"/></h1>
  </body>
</html>

结果：

Answer 1

line-height描述了线框的高度。线框不能直接存在于Flex容器中 - 所有flex项都被阻塞，并且flex容器中的任何裸文本都位于匿名Flex项目的行框中（请参阅规范的section 4）。在第一个示例中，line-height适用于该匿名弹性项目中的线条框，input的大小相应。

input和textarea元素是替换元素，在这种情况下，根据section 10.6.2 of CSS2.1使用其固有高度（请记住，由于是弹性项目，它们会被阻塞）。因此，在第二个示例中没有任何文本，line-height无法应用，因此会被忽略。

Answer 2

<强>编辑：实际上你的线高并没有被忽略。当有多行文本时，会发生行高。以下是您提供给我们的代码的略微修改版本。

<h1 style="line-height: 200px; background: blue;  display: flex"><input value="expected large line-height - success." style="width: 250px"/>ALIK</h1>
<h1 style="line-height: 200px; background: red;  display: flex"><input value="expected large line-height - FAILURE!!!" style="width: 250px"/>Lorem Ipsum sit Amet<br />Lorem ipsum sit amet</h1>

为什么在没有文本的情况下使用flex显示时会忽略行高？

2 个答案: