iOS Safari：默认验证气泡消息未正确对齐

Question

我们正在使用 HTML5 表单验证，而不会覆盖验证错误消息的默认系统 UI。这在任何地方都可以正常工作，但在 iOS Safari 上，验证消息在气泡弹出窗口内没有正确对齐。我们已经在两个完全独立的设备上以不同的形式对此进行了测试。即使是没有 CSS 的最小表单也有相同的结果：

https://jsfiddle.net/GinSan/48hnrf92/1/

<form>
  <label for="test">Test field</label>
  <input required id="test" name="test" type="text">
  <button type="submit">Submit</button>
</form>

这是验证消息在我们测试的 iOS 设备上的样子：

验证消息与顶部对齐，而不是居中对齐，即使这是一个系统 UI 元素。这是一个已知问题吗？除了向苹果报告并等待修复或替换系统验证消息之外，有什么可以做的吗？

Answer 1

在表单中添加一个类

并用 CSS 添加这个

display: flex;
align-items: center;