垂直对齐在 Chrome 上运行良好，但在 Firefox 上不起作用答案

【问题标题】：Vertical align works well on Chrome but not working on Firefox垂直对齐在 Chrome 上运行良好，但在 Firefox 上不起作用
【发布时间】：2021-03-10 04:51:14
【问题描述】：

此示例在 Chrome 上运行良好，但在 Firefox 上无法正常运行。

我们正在使用 IBM BPM 来制作基于表单的 Web 应用程序。我们无法更改 BPM 中的 html 代码。所以我们必须用 CSS 来做这件事。对不起：/ 如何用 css 解决这个问题？

textarea {
    padding: 10px 0px;
    height: 150px;
}

.form-control {
    display: block;
    /* Remove this line */
}

.alignJustify>.layoutSec.hChild>.layoutCell {
    display: table-cell
}

.layoutSec.valignTop>.layoutCell {
    vertical-align: baseline
}

.CoachView_invisible {
    visibility: hidden !important
}

<div class="alignJustify">
    <div class="layoutSec valignTop hChild">
        <div class="layoutCell">
            <div>
                Label
                <div class="input">
                    <p id="input-readonly">
                    </p>
                </div>
            </div>
        </div>
        <div class="layoutCell">
            <div>
                <div class="input">
                    <textarea class="form-control" aria-multiline="true">Content</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

最小的例子是：

div {
  display: table-cell;
  outline: 1px solid;
}

textarea {
  display: block;
  min-height: 150px;
  padding: 10px 0px;
}

<div>
  Label
</div>
<div>
  <textarea>Content</textarea>
</div>

渲染结果：

【问题讨论】：

标签： html css google-chrome firefox vertical-alignment

【解决方案1】：

您需要匹配 textarea 和标签中的填充。垂直你应该对齐到顶部。

textarea {
    padding: 10px 0px;
    height: 150px;
}

.form-control {
    display: block;
    /* Remove this line */
}

.layoutSec.valignTop .layoutCell {
    display: inline-block;
    vertical-align: top;
}
.layoutSec.valignTop .layoutCell:first-child {
    padding-top: 10px;
}

.CoachView_invisible {
    visibility: hidden !important
}

<div class="alignJustify">
    <div class="layoutSec valignTop hChild">
        <div class="layoutCell">
            <div>
                Label
                <div class="input">
                    <p id="input-readonly">
                    </p>
                </div>
            </div>
        </div>
        <div class="layoutCell">
            <div>
                <div class="input">
                    <textarea class="form-control" aria-multiline="true">Content</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

嗯，这是一个很好的解决方案，但是我们有不同的组件作为具有不同填充大小的输入。如果没有填充和使用 va:baseline 在 Firefox 上无法获得相同的结果，那么我将使所有组件具有相同的填充大小。
对齐有效，但是当您将一个元素填充 10px 时，您还需要填充第二个元素。您在原始问题中填充了 textarea。