html - 移动设备上的文本输入对齐错误(可能仅限 iOS，尚未尝试 Android)

Question

我的网页上有 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:抱歉图片尺寸不同，一张是手机截图，一张是电脑截图。

Answer 1

所以，我发现，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;
}