Блог

Главная - Вопросы по программированию - Вертикальное выравнивание хорошо работает в Chrome, но не работает в Firefox

Вертикальное выравнивание хорошо работает в Chrome, но не работает в Firefox

#html #css #google-chrome #firefox #vertical-alignment

#HTML #css #google-chrome #firefox #выравнивание по вертикали

Вопрос:

Этот пример отлично работает в Chrome, но работает не так, как ожидалось, в Firefox.

Мы используем IBM BPM для создания веб-приложений на основе форм. Мы не можем изменять html-коды в BPM. Так что мы должны сделать это с помощью 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>

Отображаемые результаты:

Chrome 77
Firefox 82

Ответ №1:

Вам нужно сопоставить отступы в текстовой области и в метке. По вертикали вы должны выровняться по верху.

 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>

Комментарии:

1. Что ж, это отличное решение, но у нас разные компоненты в качестве входных данных, которые имеют разные размеры отступов. Если нет способа получить тот же результат в Firefox без заполнения и с помощью va: baseline, тогда я сделаю так, чтобы все компоненты имели одинаковый размер заполнения.

2. Выравнивание работает, но когда вы добавляете один элемент на 10 пикселей, вам также нужно добавить второй. В вашем исходном вопросе была добавлена текстовая область.

Метки: ,