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

Question

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

<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;