В настоящее время я борюсь с некоторыми различиями между Firefox и Chrome, которые демонстрируют различное поведение при размещении абсолютно позиционированного элемента в относительно позиционированном элементе, который имеет display:inline;.
В Chrome следующий пример помещаетМетка «Foo» в верхней части правой нижней части ввода текста, а в Firefox метка «Foo» помещается поверх текста «Example» над полем ввода.
.box {
width: 300px;
border: 1px solid black;
}
.relative-box {
position: relative;
}
.relative-box::after {
content: "Foo";
position: absolute;
bottom: 0px;
right: 0px;
background: #AAA;
}
input[type="text"] {
display: inline-block;
width: 260px;
}
<div class="box">
<label class="container">
<span class="relative-box">
Example:
<input type="text"/>
</span>
</label>
</div>
Мне любопытно узнать, есть ли способ сохранить точно такую же функциональность, включая использование <label>, и в то же время получить последовательный рендерингТекст "Foo".
Желательно, чтобы у меня было решение, которое не подразумевало бы изменение display:inline; на что-либо еще, потому что для моих приложений это также могло бы иметь дополнительные нежелательные эффекты.
PS: обратите внимание, что это минимальный рабочий пример. Тот факт, что это выглядит очень недружественным для пользователя, заключается в том, что к этому примеру не применяется много стилей.