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）中使用不同的浏览器看起来像是图像：

如果我从电子邮件字段中删除“表单控件”类，它看起来像这个图像：

有没有人知道一个解决方案，它不涉及删除“表单控件”并更改我的应用程序中所有文本输入字段中的样式或更改webkit占位符css位置（因为此解决方案可以在多个浏览器中更改Web样式而不只是在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">