html - 移动 Safari 上的切碎占位符

Question

我对移动 Safari 上的占位符有疑问。我已经在 iOS 10 和 11 上对其进行了测试，到目前为止我找不到任何解决方案。以下是 iOS Safari 和 Firefox/Chrome 的屏幕截图(桌面开发工具，但在 Android 上看起来相同):



以下是我现在使用的占位符样式:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #555555;
  text-indent: 1rem;
  padding: 1rem;
  margin: 0 !important;
  white-space: normal;
}

并输入:

.form__input {
  font-family: 'Poppins', sans-serif;
  width: 100%;
  border: none;
  text-indent: 1rem;
  transition: all 0.5s;
  padding: 1rem !important;
  border-radius: 0 !important;
}

“::-moz-placeholder”、“:-ms-input-placeholder”和“:-moz-placeholder”的样式相同。我也尝试过“填充:0!重要”，不同的文本缩进。在输入上，我尝试使用 0 填充的固定高度，但也没有运气。

这里发生了什么？在我发现的 webkit 占位符规范中，实际上没有什么会导致这种情况。有没有人遇到过类似的问题并找到了解决方案？

Answer 1

好的，更改字体大小没有帮助，但在输入和文本区域中添加“行高:正常”修复了 iOS Safari 上的问题。我也在其他浏览器上检查过它，它看起来也很好。现在的风格是:

::-webkit-input-placeholder (and other vendor specific selectors)
  color: #555555;
  text-indent: 1rem;
  white-space: normal;
}

和:

.form__input {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  width: 100%;
  border: none;
  text-indent: 1rem;
  transition: all 0.5s;
  padding: 0.5rem;
  border-radius: 0;
  line-height: normal;
}