Question

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

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添加了一个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;
}

这不是最佳做法答案，但我的情景只是因为某些原因而无法让出更好的答案。

输入占位符未在firefox

3 个答案: