iOS 表单控件占位符垂直对齐

Question

我目前正在使用 Bootstrap 3 开发 Angular 4 Web 应用程序，其中我有多个文本和选择输入。选择输入没有问题，它们工作正常，但在文本输入字段中我遇到了占位符问题。

我的输入代码是这样的(只是一个标准输入):

<input type="text" class="form-control" placeholder="Email">

我可以看到它应该在桌面的 Chrome/Firefox 和几个不同版本的 Android 设备中，但在 iOS 11+ 设备(iPhone 6S、8、8 Plus、X)和不同的浏览器中它看起来像图片:

如果我从电子邮件字段中删除“form-control”类，它看起来像这个图像:

有没有人知道不涉及删除“表单控件”和更改我应用程序中所有文本输入字段中的样式或更改 webkit 占位符 css 位置的解决方案(因为此解决方案可能会在多个浏览器中更改网页样式而不仅仅是在 Safari 中)？

Answer 1

我看不到 imgur 图片(公司代理)，但如果输入的垂直对齐是您的问题，解决方案是使用 line-height 属性。您可以固定该值，也可以获取输入的高度并动态设置该值。

这是一个输入相当大的例子。

input.form-control {
  margin: 24px;
  width: 200px;
  height: 100px;
  line-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<input type="text" class="form-control" placeholder="Email">