Dieser Codepen zeigt, dass die Schaltfläche mit top: 14px
nicht in Firefox ausgerichtet ist, wenn es in Chrome ist.wie man einen Anzeigeunterschied zwischen Chrom und firefox für css relative Position repariert?
Wie kann ich das beheben?
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; \t
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; \t \t
color: white;
background-position: 36px 12px; \t
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>