Eingabeposition nicht richtig angezeigt auf Iphone

Question

Ich bin mit Eingabeformular stecken geblieben. Wenn ich es in der Entwicklerkonsole einchecke, ist alles in Ordnung. Aber wenn ich es von meinem iPhone aus überprüfe, ändere die Position ungefähr auf 1-2px. Ich überprüfe es von Android-Handy mit den gleichen Größen und alles ist in Ordnung. Eingabe auf Iphone 5 in der Dev-Konsole - http://cs629525.vk.me/v629525181/40c5e/zrdadYwKeBU.jpg. Eingabe von meinem iPhone 5s - http://cs629525.vk.me/v629525181/40c57/KjsRhwnjQ4k.jpg. -Code unten

<form id="subscribe"> 
      <input type="text" class="enter-email" name="subscribe-email" id="subscribe-email" placeholder="YOUR EMAIL" spellcheck="false" /> 
      <button type="submit" id="signup-button" class="signup-button c-form">NOTIFY ME</button> 
      <label for="subscribe-email" class="subscribe-message c-form"></label> 
     </form> 
<!--css--> 
.enter-email { 
margin-top: 30px; 
margin-left: 17.5%; 
width: 40%; 
font-size: 16px; 
height: 50px; 
background: none; 
border: 2px solid white; 
color: #fff; 
text-align: center; 
outline: none; 
-webkit-transition: all 0.5s ease; 
transition: all 0.5s ease;} 

.signup-button { 
height: 50px; 
border: 2px solid white; 
color: white; 
text-align: center; 
padding: 5px; 
font-size: 16px; 
width: 25%; 
background: #32dbd0; 
margin-left: -6px; 
transition: all 0.4s ease;} 

::-webkit-input-placeholder { 
color: #fff; 
font-size: 16px; 
text-align: center; 
padding: 1px; } 

Answer 1

Fügen Sie den folgenden auf Ihre zwei Elemente:

.enter-email { 
    vertical-align: top; 
    ... 
} 

.signup-button { 
    vertical-align: top; 
    ... 
} 

Buttons und Eingänge sind standardmäßig Inline-Blöcke. Das wird sie zwingen, auf derselben Ebene ausgerichtet zu sein.