入力プレースホルダがFirefoxで垂直方向に配置されていません

Question

私のウェブサイトでは、テキスト入力のプレースホルダはテキスト入力内に配置されています。他のすべてのブラウザでは、ブラウザは垂直方向に中央に配置されています。 Firefoxのの

画像：まったく同じコードで

In this jsfiddle that I made、それが縦にFirefoxでセンタリングされます。

jsfiddleのトップにないときに、私のウェブサイトのFirefoxの入力の上部に何があるのでしょうか？

コード：

HTML：

<div id="search-button"> 
      <input id="search-input" placeholder="SEARCH KEY WORD"></input> 
      <div id="search-icon"></div> 
     </div> 

CSS：

#search-button, 
#search-icon { 
    font: 200 14px 'Helvetica Neue' , Helvetica , Arial , sans-serif; 
    border-radius: 6px; 
    height: 64px; 
    text-decoration: none; 
    color: #fff; 
    float: right; 
    margin-bottom: 20px; 
    line-height: 64px; 
} 
#search-button { 
    position: relative; 
    width: 100%; 
    border: 1px solid #00bfff; 
} 
input, 
textarea, 
button { 
    outline: none; 
} 
#search-input { 
    position: absolute; 
    height: 100%; 
    left: 20px; 
    right: 20px; 
    font-size: 14px; 
    text-transform: uppercase; 
    line-height: 100%; 
    width: calc(100% - 80px); 
    display: inline-block; 
    border: 0; 
    color: #00bfff; 
} 
#search-icon { 
    width: 64px; 
    height: 64px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    background: url("../../assets/images/home_page/search-blue.svg") center no-repeat; 
    background-size: 40%; 
} 

Answer 1

セットline-heightと等しいheightそのテキストとプレースホルダーは、垂直この

CSSのように中心に来るように

#search-input { 
    line-height:40px; 
    height:40px; 
} 

行の高さは、両方が同じテキストを縦中央

Answer 2

は、私はあなたが言及して正確な効果を再現することができませんでしたが表示されますされている場合、我々は非常によく知っているテキストボックスと高さの内部の値に高さを与えます。あなたが言うように、それはフィドルには現れません。要素内のテキストの間隔を処理するのに、line-heightを使用しています。これは、ローカルブラウザのフォント設定によって影響を受ける可能性があります（カスタムブラウザのフォント設定などがあるかもしれません）。

代わりにpaddingプロパティを使用して検索ボックスにテキストの間隔を設定してみてください。これは、ブラウザのfont-heightの影響を受けません。

Answer 3

私は既に特定のブラウザをターゲットにしてプレースホルダを色付けしていました。そのため、firefoxのラインハイト属性を追加しました。

::-webkit-input-placeholder { 
    color: brand-blue; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: brand-blue; 
    line-height 60px; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: brand-blue; 
    line-height 60px; 
} 

:-ms-input-placeholder { 
    color: brand-blue; 
} 

そうでもないのベストプラクティスの答えは、私のシナリオはちょうど良い答えが何らかの理由で動作することはできませんでした。