在Firefox中输入占位符垂直未对齐

Question

在我的网站上，文本输入框的占位符在Firefox浏览器中位置较高，而在其他所有浏览器中都是垂直居中的。

Firefox浏览器中的图片：

在这个我创建的jsfiddle中，使用完全相同的代码，它在Firefox中是垂直居中的。

为什么在我的网站上它在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%;
}

- BeniaminoBaggins

Answer 1

将line-height和height设置为相等，以使文本和占位符垂直居中，如下所示：

CSS

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

行高会给文本框中的值分配高度，我们非常清楚高度相等时文本将垂直居中显示。

- Gaurav Aggarwal

---

很遗憾，这会在Safari上出现问题。Chrome 处理这两种情况都很好。 - Sayan

Answer 2

我已经针对特定的浏览器来给占位符上色，因此我只需在Firefox上添加line-height属性。

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

这并不是最佳实践的答案，但由于某些原因，我的情况下没有更好的答案可用。

- BeniaminoBaggins

Answer 3

我无法复制您提到的确切效果。正如您所说，它在fiddle中没有显示出来。我注意到您正在使用line-height处理元素中的文本间距。这可能会受到本地浏览器字体设置的影响（您可能有一些自定义的浏览器字体设置或其他问题）。

您可以尝试使用padding属性来设置搜索框中文本的间距，这样不会受到浏览器font-height效果的影响。

- robertdavid