Поле ввода проникает в div с метками в IE 11 - PullRequest
Новая
       55

Поле ввода проникает в div с метками в IE 11

1 голос
/ 13 марта 2020

CSS: 

.container {
    margin-right: 75px;
    float: left;
    position: relative;
}
.input-large {
    width: 210px;
}
.label-a {
    float: left;
}
.label-b {
    float: right;
}

HTML: 

<div class="container">
    <div>
        <label class="label-a">label-a</label>
        <label class="label-b">label-b</label>
    </div>
    <input class="input-large" type="text" />
</div>

Результат в IE 11 и Chrome (скриншот)

Почему поле ввода помещается между двумя метками в IE 11, а в Chrome это нормально?

Ответы [ 3 ]

1 голос
/ 13 марта 2020 

.container {
    margin-right: 75px;
    float: left;
    position: relative;
    width:215px;
}
.input-large {
    width: 210px;
}
.lablerow{float:left;width:100%;}
.label-a {
    float: left;
}
.label-b {
    float: right;
}
<div class="container">
    <div class="lablerow">
        <label class="label-a">label-a</label>
        <label class="label-b">label-b</label>
    </div>
    <input class="input-large" type="text" />
</div>
0 голосов
/ 16 марта 2020

Кажется, что из-за IE и Chrome принимает различную ширину контейнера div.

В IE ширина контейнера div является суммой ширины input, label-a и label-b:

enter image description here

Но в Chrome ширина контейнера div принимает ширину input:

enter image description here

Поскольку IE и Chrome имеют разные механизмы рендеринга, они по-разному рассчитывают ширину элемента. Если нам нужно такое же отображение в IE, нам нужно установить ширину контейнера.

0 голосов
/ 13 марта 2020

Размер элемента ввода варьируется в зависимости от браузера. Я подтвердил это, проверив элементы в браузере. Я считаю, что IE может также рассматривать width иначе, чем chrome, например. ширина содержимого или ширина содержимого и отступов.

(Также, если вы планируете использовать гибкие блоки, я рекомендую также взглянуть на сетку CSS в качестве альтернативы, поскольку она работает в 2D, а не просто вниз страницы).

...