Html firefox中的输入占位符未垂直对齐

在我的网站中，文本输入的占位符仅在firefox中位于文本输入的较高位置。在所有其他浏览器中，它垂直居中

firefox图像：

使用完全相同的代码，它在firefox中垂直居中

当它在JSFIDLE中不在顶部时，是什么导致它在我的网站的firefox中位于输入的顶部

代码：

html:

---

将

行高

和

高度

设置为相等，以便文本和占位符像这样垂直居中

css

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

行高将给出文本框内值的高度，我们非常清楚的高度，若两者相等，文本将垂直显示在中间

---

我无法再现你提到的确切效果。正如你所说，它不会出现在小提琴上。我确实注意到您正在使用

行高

来处理元素中的文本间距。这可能受本地浏览器字体设置的影响（您可能有一些自定义浏览器字体设置或正在进行的操作）

---

您可能想尝试使用

padding

属性来设置搜索框中文本的间距，这将不受浏览器的任何

字体高度影响。
我已经针对特定浏览器为占位符上色，所以我只是在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;
}

这并不是最佳实践答案，但由于某种原因，我的方案无法提供更好的答案
 不幸的是，这在狩猎中把事情搞砸了。Chrome可以很好地处理这两种情况。
#search-input {
    line-height:40px;
    height:40px;
}

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