对启动页面浏览器差异进行故障排除

Question

我使用rails 4.2.4为我的Web应用程序构建了一个启动页面，并决定测试它如何在众多不同的浏览器中呈现。

从我附带的屏幕截图中可以看出，它在firefox，opera和chrome中完美呈现。

然而，在古老的野生动物园中，搜索栏占位符看起来已被向后拖过树篱。

我如何才能最好地解决野生动物园中的这种美学差异。

是通过某种媒体查询还是高级CSS组件进行管理。？

  

_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="/">
      <img alt="Nippon Beauty" class="navbar-brand-icon" src="assets/nippon.svg">
    </a>
  </div>

  <div class="wrap">
    <div class="search">
      <input type="text" class="searchTerm" placeholder="What type of Skincare product would you like?">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
      </button>
    </div>
  </div>

  <!--<span style="color: #53100e">| Japanese and South Korean Luxury Skincare</span> 

  <!-- 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>

  

bootstrap_and_customization.css.scss

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

$body-bg:                          #ecf0f1;
$font-family-sans-serif:           'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$navbar-height:                    70px;
$navbar-default-bg:                white;
$navbar-default-brand-color:       #c0392b;
$brand-primary:                    #c0392b;
$jumbotron-bg:                     white;

@import 'bootstrap';
@import 'bootstrap-sprockets';

.center {
     text-align: center;
}

.navbar-brand {
     font-weight: bold;
}


.btn-lg {
    padding: 18px 28px;
    font-size: 22px;
    border-radius: 8px;
    }


.jumbotron {
    width: 735px;
    padding-left: 30px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.container .jumbotron {
    border-radius: 35px;
}


.container {
    width: 1270px;
}




.navbar {
    min-height: 90px;
}

.navbar-brand {
    float: left;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: normal;
}

.navbar-brand img {
  display: inline-block;
}


.navbar-brand span {
    display:inline-block;
    vertical-align : middle;
    height: 7px;
}


h1, {
  font-family: 'Lobster', cursive;
  color: #e22f8f;
}

.row {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 3rem;
  background-color: #efefef;
  text-align: center;
  font-size: 18px;
  font-weight: normal;
}



li {
  display: inline-block;
  *display: inline;
  padding: 8px;
  color: #e22f8f;
  }

a {
    color: #a0616d;
    text-decoration: none;
    padding: 13px;
}





/*=========================
  search bar 
 ================= */

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

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

 .search {
   width: 100%;
   position: relative;
 }

 .searchTerm {
   float: left;
   width: 100%;
   border: 15px;
   background: #F2F2F2;
   padding: 5px;
   height: 40px;
   border-radius: 8px;
 }

 .searchTerm:focus{
   color: #000000;
 }


 .searchButton {
   position: absolute;  
   right: -50px;
   width: 40px;
   height: 40px;
   background: #a0616d;
   text-align: center;
   color: #fff;
   border-radius: 5px;
   cursor: pointer;
   font-size: 20px;
 }



 /*Resize the wrap to see the search bar change!*/

 .wrap{
   width: 35%;
   position: absolute;
   top: 69%;
   left: 45%;
   transform: translate(-50%, -50%);
 }

 /*This code beneath puts the glow round the search placeholder!*/

textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {   
    border-color: rgba(160, 97, 109, 0.8);
    box-shadow: 0 1px 1px rgba(160, 97, 109, 0.075) inset, 0 0 13px rgba(160, 97, 109, 0.6);
    outline: 0 none;
}