为什么我的搜索栏中的占位符文本没有出现在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;

因此垂直填充量为50px，但您将高度设置为仅40px。让你的身高大于填充量，你会看到文字。

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

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