：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; 
} 

リンク：理由span内inputを置くの素子間隔のだhttps://jsfiddle.net/g0ztgcw8/9/

Answer 1

。

.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>

あなたはクロームに変化が見られないだろうと、コードが表示されます：あなたは、input要素の終了と終了spanタグの間の空白をコメントアウトすることでこの問題を解決することができますFirefox上の入力要素内のユーロ記号が正しく表示されます。

Answer 2

これらのブラウザでは、表示が異なるのは、これらのブラウザのインライン要素の表示順序が異なるためです。最初にポジショニングを行って、一方のブラウザでは「€」を、他方のブラウザではもう一方の方向にレンダリングします。 .inputlabel-span:after { width: 12px; }などのような幅を与えてみてください。

inputタグをスパンの内側に置くことは、方法とこの動作のもう1つの理由からかなり悪い習慣です。このスパムに少なくともdisplay: inline-blockを追加する必要があります（このDOM構造を維持したい場合）。
：の要素の後には、要素を垂直に中央に配置するには、top: 50%; transform: translateY(-50%)要素を追加する必要があります。

常に* { box-sizing: border-box }を定義することもお勧めしますが、これは特に問題はありません。

Answer 3

あなたのスパンの周囲に境界線を追加する場合は、あなたが表示されます、クロームでそれがあるだけの小さな高さ、スパンがdisplay:inline-blockになると、自分の都合の良い時に、あなたのコードの残りの部分を変更するdisplay:inline 強制スパンであるので、それを修正するためにすべてのブラウザでいくつかのトリックを行う必要はありません、それはすべてのブラウザで同じになります。