Javascript 输入位置不为'；无法在Iphone上正确显示

我被输入表单卡住了。当我在开发者控制台中检查它时，一切都正常。但当我在iphone上查看时，它的位置大约变为1-2px。我用同样大小的安卓手机检查，一切正常。 在开发人员控制台中输入Iphone 5-。 来自我的iphone 5s的输入-。 代码如下

<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; }

通知我
。输入电子邮件{
边缘顶部：30px；
左缘：17.5%；
宽度：40%；
字体大小：16px；
高度：50px；
背景：无；
边框：2倍纯白；
颜色：#fff；
文本对齐：居中；
大纲：无；
-webkit过渡：所有0.5s轻松；
转换：所有0.5s轻松；}
.注册按钮{
高度：50px；
边框：2倍纯白；
颜色：白色；
文本对齐：居中；
填充物：5px；
字体大小：16px；
宽度：25%；
背景：#32dbd0；
左边距：-6px；
转换：所有0.4s轻松；}
：-webkit输入占位符{
颜色：#fff；
字体大小：16px；
文本对齐：居中；
填充：1px；}

在两个元素中添加以下内容：

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

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

默认情况下，按钮和输入是内联块。这将迫使它们在同一级别上对齐