Iphone上的输入位置无法正常显示

I am get stuck with input form. When I check it in developer console all is ok. But when I check it from my iphone it change position to 1-2px approximately. I check it from android phone with same sizes and all is ok. Input on Iphone 5 in dev console - http://cs629525.vk.me/v629525181/40c5e/zrdadYwKeBU.jpg . Input from my iphone 5s - http://cs629525.vk.me/v629525181/40c57/KjsRhwnjQ4k.jpg . Code below

我被输入表格困住了。当我在开发者控制台中检查它时,一切正常。但是当我从我的iPhone上检查它时,它将位置改为大约1-2px。我从具有相同尺寸的Android手机检查它,一切都很好。在开发控制台中输入Iphone 5 - http://cs629525.vk.me/v629525181/40c5e/zrdadYwKeBU.jpg。从我的iPhone 5s输入 - http://cs629525.vk.me/v629525181/40c57/KjsRhwnjQ4k.jpg。代码如下

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

1 个解决方案

#1

Add the following to your two elements:

将以下内容添加到您的两个元素中:

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

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

Buttons and inputs are by default inline-blocks. That will force them to be aligned at the same level.

默认情况下,按钮和输入是内联块。这将迫使他们在同一水平上对齐。

#1