: после позиционирования по диапазону между Chrome и Firefox

Question

У меня возникла проблема при создании HTML-ввода с прикрепленным к нему символом (например, деньги). Chrome и Firefox, похоже, по-разному выравнивают «денежный символ».

HTML-

<div class="inputlabel"> 
    <label> 
    Some Label 
    </label> 
    <span class="inputlabel-span input-symbol-euro"> 
    <input type="text"/> 
    </span> 
</div> 

CSS-

.inputlabel label{ display: block} 
.inputlabel input{ line-height:50px;} 

.inputlabel-span { 
    position: relative; 
} 
.inputlabel-span input { 
    padding:0; 
    width:200px; 
    border:none; 
} 
.inputlabel-span:after { 
    position: absolute; 
    top:0; 
    content: "€"; 
    right: 0px; 
} 

Ссылка на скрипку: https://jsfiddle.net/g0ztgcw8/9/

Answer 1

Это из-за расстояния между элементного положить input внутри span. Вы можете это исправить, закомментировав белое пространство между концом входного элемента и закрытия span тег:

.inputlabel label{ display: block} 
 
.inputlabel input{ line-height:50px;} 
 

 
.inputlabel-span { 
 
    position: relative; 
 
} 
 
.inputlabel-span input { 
 
    padding:0; 
 
    width:200px; 
 
    border: none; 
 
} 
 
.inputlabel-span::after { 
 
    position: absolute; 
 
    top:0; 
 
    content: "€"; 
 
    right: 0px; 
 
}

<div class="inputlabel"> 
 
    <label> 
 
    Some Label 
 
    </label> 
 
    <span class="inputlabel-span input-symbol-euro"> 
 
    <input type="text"/><!-- 
 
--></span> 
 
</div> 
 

 
<p></p> 
 
<div style="width:200px;background-color:red;"> 
 
This div has 200px 
 
</div>

Вы не увидите никаких изменений в Chrome и код будет отображать Значок евро внутри элемента ввода в Firefox правильно.

Answer 2

То, что эти браузеры отличаются от других, связано с различным порядком отображения встроенных элементов в этих браузерах. Первое позиционирование затем отображает «€» в одном браузере или наоборот в другом браузере. Попробуйте дать ему ширину, например .inputlabel-span:after { width: 12px; } или что-то подобное.

Помещение input тегов внутри пролета - довольно плохая практика, кстати, и другая причина такого поведения. Вы должны как минимум добавить display: inline-block к этому span, если вы хотите сохранить эту структуру DOM.
Ваш : после элементам потребуется дополнительно top: 50%; transform: translateY(-50%), чтобы расположить его по вертикали.

Я также рекомендую всегда определять * { box-sizing: border-box }, но это не имеет ничего общего с вашим вопросом.

Answer 3

Если добавить рамку вокруг диапазона, вы увидите, в хроме она имеет лишь небольшой рост, потому что пролет в display:inline Force пролета быть display:inline-block и изменить остальную часть вашего кода на вашем удобстве, вам не нужно будет делать какой-либо трюк во всех браузерах, чтобы исправить это, он будет таким же во всех браузерах.