移动野生动物园的切碎占位符

Question

移植野生动物园的占位符有问题。我已经在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”。我也尝试使用“padding：0！important”，不同的文本缩进。在输入上我试过固定高度0填充，但也没有运气。

这里发生了什么？在我发现的webkit占位符规范中，几乎没有什么可以导致这一点。有没有人有类似的问题，并找到任何解决方案？

Answer 1

好的，更改字体大小并没有帮助，但添加＆＃34; line-height：normal＆＃34;输入和文本区域修复了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;
}

Answer 2

强制字体大小：

.form__input { font-size: 13px; }