Firefox上与textarea的基线对齐问题

在此问题中，我们需要确保文本框textarea与其周围的文本具有正确的基线对齐。以下是一个解决该问题的示例代码：

HTML：

<div class="container">
  <label for="myTextarea">Textarea基线对齐测试：</label>
  <div class="textarea-wrapper">
    <textarea id="myTextarea"></textarea>
    <span class="baseline-reference">基线对齐测试</span>
  </div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.textarea-wrapper {
  display: flex;
  align-items: baseline;
}

#myTextarea {
  flex: 1;
  font-size: 16px;
  line-height: 1.5;
  padding: 10px;
}

.baseline-reference {
  font-size: 16px;
  font-weight: bold;
}

在上面的代码中，我们使用了flexbox来实现文本框和参考文本的基线对齐。要注意textarea必须放在一个包含它的包装器中，以便我们可以更轻松地控制它的样式。我们还为包装器设置了flex属性，并使该元素对其子元素（文本框和参考文本）进行了基线对齐。我们还为文本框设置了一些样式，以确保它与参考文本保持一致。