我被输入表单卡住了。当我在开发人员控制台中检查它时,一切正常。但是当我从我的 iPhone 检查它时,它的位置大约改变为 1-2px。我用相同尺寸的安卓手机检查了一下,一切正常。 在开发控制台中输入 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; }
最佳答案
将以下内容添加到您的两个元素中:
.enter-email {
vertical-align: top;
...
}
.signup-button {
vertical-align: top;
...
}
按钮和输入默认是行内 block 。这将迫使它们在同一级别对齐。
关于javascript - 输入位置在 Iphone 上无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36635671/