如何修复chrome和firefox之间的显示差异为css相对位置？

Question

此代码集显示，当Firefox位于Chrome中时，top: 14px按钮未在Firefox中对齐。

我该如何解决这个问题？

http://codepen.io/matoeil/pen/XKNaVV

.research_container {
  height: 138px;
  background-image: repeating-linear-gradient(45deg,#0071b9, #22bbea);
  position: relative;
  width: 100%;
}

.research_container form {
  padding: 0 0 0 25px;
  width: 93%;
}

.research_container legend {
  font-size: 300%;
  color: rgb(255,255,255);
  padding: 25px 0 0 25px;
  margin: 0 0 15px 0;
  text-transform: uppercase;
}

.research_container .form-group {
  display: inline-block;
  position: relative;
  margin: 0;
}

.research_container #listeDeChoix {
  display: inline-block;
  position: relative;
  width: 81%;
}

.research_container input {
  width: 100%;
  height: 37px;
  border: none;	
  position: relative;
  height: 39px;
  padding: 0 0 0 15px;
  text-transform: uppercase;
}

.research_container button {
  background-image: url("../images/loupe.png");
  background-repeat: no-repeat;
  background-size: 16px;
  border: 0 none;   
  background-color: white;		
  color: white;
  background-position: 36px 12px;	
  position: relative;    
  height: 39px;
  margin: 0 0 0 -2px;  
  top: -5px;
  width: 349%;
  margin: 0 5px 0 0px;
  top: 14px;  
}

<div class="research_container">
  <legend>Trouver un personnel</legend>
  <form action="/app_dev.php/personnels" method="post" name="appbundle_personnels">
    <div id="listeDeChoix" class="form-group">
      <input type="text" placeholder="Nom, Prénom" name="appbundle_personnels[nom]" id="appbundle_personnels_nom">
    </div>
    <div class="form-group">
      <button onclick="ani();" class="btn btn-success" id="btTrouverPers" name="btTrouverPers" value="btTrouverPers" type="submit"></button>
    </div>
  </form>
</div>

Answer 1

从top移除css，并将vertical-align: top与display: inline-block一起使用。

.research_container {
  height: 138px;
  background-image: repeating-linear-gradient(45deg,#0071b9, #22bbea);
  position: relative;
  width: 100%;
}

.research_container form {
  padding: 0 0 0 25px;
  width: 93%;
}

.research_container legend {
  font-size: 300%;
  color: rgb(255,255,255);
  padding: 25px 0 0 25px;
  margin: 0 0 15px 0;
  text-transform: uppercase;
}

.research_container .form-group {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0;
}

.research_container #listeDeChoix {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 81%;
}

.research_container input {
  width: 100%;
  height: 37px;
  border: none;	
  position: relative;
  height: 39px;
  padding: 0 0 0 15px;
  text-transform: uppercase;
}

.research_container button {
  background-image: url("../images/loupe.png");
  background-repeat: no-repeat;
  background-size: 16px;
  border: 0 none;   
  background-color: white;		
  color: white;
  background-position: 36px 12px;	
  position: relative;    
  height: 39px;
  margin: 0 0 0 -2px;  
  width: 349%;
  margin: 0 5px 0 0px;
}

<div class="research_container">
  <legend>Trouver un personnel</legend>
  <form action="/app_dev.php/personnels" method="post" name="appbundle_personnels">
    <div id="listeDeChoix" class="form-group">
      <input type="text" placeholder="Nom, Prénom" name="appbundle_personnels[nom]" id="appbundle_personnels_nom">
    </div>
    <div class="form-group">
      <button onclick="ani();" class="btn btn-success" id="btTrouverPers" name="btTrouverPers" value="btTrouverPers" type="submit"></button>
    </div>
  </form>
</div>

Answer 2

从top:14px中删除top:-5px和.research_container button 将float:left添加到.research_container button和.research_container .form-group