2016-06-22 7 views
0

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>

Antwort

1

top von css entfernen und vertical-align: top mit display: inline-block verwenden.

.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; \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; 
 
    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>

1

entfernen top:14px und top:-5px von .research_container button
hinzufügen float:left-.research_container button und .research_container .form-group