Входной заполнитель не вертикально выровнен в firefox

Question

На моем веб-сайте заполнитель текстового ввода расположен высоко в текстовом входе, только в firefox. Во всех других браузерах он вертикально центрирован.

Изображение светлячка:

In this jsfiddle that I made с точно таким же кодом, он центрирован в светлячок.

Что может быть причиной того, что он находится в верхней части ввода в firefox на моем веб-сайте, когда он не находится в верхней части jsfiddle?

код:

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

Не совсем правильный ответ, но мой сценарий почему-то не позволил лучше ответить на работу.