为什么我的搜索栏中的占位符文本没有出现在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更改高度,然后将填充添加到结果中.再一次,只是一个猜测,但这似乎正在发生.