移动 Safari 上的切碎占位符答案

【问题标题】：Chopped placeholders on mobile safari移动 Safari 上的切碎占位符
【发布时间】：2019-06-26 03:01:36
【问题描述】：

我对移动 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 占位符规范中，实际上没有什么会导致这种情况。有没有人遇到过类似的问题并找到解决办法？

【问题讨论】：

在移动设备上尝试 font-size:16px 输入
@AbbasNabilou - 不工作。可以解释为什么这会起作用。
手机上的输入有问题，比如当它们有 em 等值时自动缩放...... font-size:16px 可以解决它。尝试解决 line-height...

标签： html ios css

【解决方案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;
}

【讨论】：

在输入问题之前，我已经知道会被问到什么，并准备提供相同的答案。额外提示：垂直填充在 input 元素中也是无用的 - height 负责一切。
感谢您的提示，也许有一天会有用 :)
由于浏览器的行为不同，还具有重置 CSS 可能是有益的 :)
是的，尽管我的所有项目中总是包含 normalize.css，但 Safari 有时似乎会出现一些奇怪的行为；p

【解决方案2】：

强制字体大小：

.form__input { font-size: 13px; }

【讨论】：