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

Posted 2023-03-05

【中文标题】输入占位符在 Firefox 中未垂直对齐

【英文标题】：Input placeholder not vertically aligned in firefox

【发布时间】：2016-07-25 02:45:57

【问题描述】：

在我的网站中，文本输入的占位符位于文本输入的高位，仅在 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%;

【参考方案1】：

将line-height 和height 设置为相等，这样文本和占位符就会像这样垂直居中

css

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

行高将为文本框内的值提供高度，如果两者相等，我们非常清楚，文本将显示垂直居中

【讨论】：

不幸的是，这在 Safari 上搞砸了。 Chrome 可以很好地处理这两种情况。

【参考方案2】：

我无法重现您提到的确切效果。正如你所说，它不会出现在小提琴中。我确实注意到您正在使用line-height 来处理元素中的文本间距。这可能会受到本地浏览器字体设置的影响（您可能有一些自定义浏览器字体设置或正在发生的事情）。

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

【参考方案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;

并不是真正的最佳实践答案，但由于某种原因，我的方案只是不允许更好的答案起作用。