我的网页上有 2 个表单,它们在 iOS 设备(iPhone、iPad Safari)上对齐错误。在计算机上它可以正确显示(Windows,实际上甚至带有 Safari 的 Mac),但在移动设备上,由于某种原因,输入不居中。有趣的是,它不是整个表单,而只是输入元素。 第一张图片是它在 Chrome 开发者工具中的外观,第二张图片是它在 iPhone 上的外观。
HTML
<form class="newsletter-form">
<div class="newsletter-form-container">
<input id="newsletter" type="email" placeholder="name@domain.com" />
<button id="newsletter-send" type="button"><i class="material-icons">chevron_right</i></button>
</div>
<p id="newsletter-sub-status"></p>
</form>
CSS
.newsletter-form-container {
position: relative;
width: 40%;
margin: 0 auto;
}
.newsletter-form {
position: absolute;
height: auto;
bottom: -38px;
left: 0;
z-index: 50;
width: 100%;
-webkit-appearance: none;
}
.newsletter-form input {
border: none;
border-radius: 15px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 300;
height: 76px;
text-align: center;
width: 100%;
-webkit-appearance: none;
}
还有一种形式,其中一种是静态定位的,输入是 display: block 并且显示错误。这只是我可以用 -webkit 修复的一些 iOS 问题吗?在 google 上找不到答案,所以我在这里尝试。
PS:抱歉图片尺寸不同,一张是手机截图,一张是电脑截图。
最佳答案
所以,我发现,iOS 默认情况下只是向输入元素添加填充,因为输入的默认设置是 box-sizing: content-box;
你所要做的就是:
a) 将输入元素的填充设置为 0 padding: 0;
或者
b) 设置 box-sizing: border-box;
然后填充基本上进入元素内部。
该元素的最终 CSS 如下所示:
.newsletter-form input {
border: none;
border-radius: 15px;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 300;
height: 76px;
text-align: center;
width: 100%;
-webkit-appearance: none;
padding: 0;
}
关于html - 移动设备上的文本输入对齐错误(可能仅限 iOS,尚未尝试 Android),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59934752/