为什么我的搜索栏中的占位符文本没有出现在 Firefox 中

Question

我有一个跨浏览器问题，其中嵌套在我的 Rails 应用程序的搜索栏中的占位符文本没有出现在 Mozilla 中，尽管在所有其他浏览器中工作得很好。

我四处寻找答案，但没有成功。

在 Safari、Chrome 和 Opera 中呈现的搜索栏。

使用 Firefox 呈现的搜索栏。

_header.html.erb

<nav class="navbar navbar-static-top navbar-default" role="navigation">
  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">
      <%= image_tag('nippon.svg', alt: "Nippon Beauty", class: "navbar-brand-icon") %>
    </a> 
  </div>

      <input type="text" class="searchTerm" placeholder="What type of Skincare product would you like?">

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li><%= link_to "Home", root_path %></li>
      <li><%= link_to "About", about_path %></li>
      <li><%= link_to "Login", new_user_session_path %></li> 
      <li><%= link_to "Signup", new_user_registration_path %></li>
      <% if user_signed_in? %>
        <li><%= link_to "Account Settings", edit_user_registration_path %></li>
        <li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
      <% else %>
    <% end %>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

 body{
   font-family: 'Open Sans', sans-serif;
 }


 .searchTerm {
   position: absolute;
   left: 550px;
   top: 20px;
   width: 370px;
   border: 15px;
   background: #F2F2F2;
   padding: 25px;
   height: 40px;
   border-radius: 8px;
 }

Answer 1

问题是您使用的填充总量大于输入的高度。

padding: 25px;

是一样的

padding-top: 25px; padding-bottom: 25px;

所以垂直内边距的数量是 50 像素，但您将高度设置为只有 40 像素。让你的高度大于填充量，你会看到文字。

---

当然，问题变成了为什么不这会导致其他浏览器出现问题。看起来Chrome通过在填充大于给定高度时剪掉填充来处理它。如果我在 Chrome 中去掉 CSS 的高度，搜索框实际上会变大。我猜其他浏览器也会做同样的事情。

我的猜测是问题在于 CSS 在不同浏览器中的应用顺序。 Chrome 添加填充，然后更改结果的高度。 Firefox 更改高度，然后将填充添加到结果中。同样，只是一个猜测，但这似乎正在发生。