Chrome电子邮件输入字段内置验证警告在视觉上偏移

Question

我正在为迷你应用程序构建一个超级简单的注册表单，并认为如果可以的话，使用浏览器的内置HTML5验证会很有趣 - 所以我为表单创建了一个文本输入{ {1}}用于测试。将其加载到Chrome（27.0.1453.116）并尝试输入无效的电子邮件（“lksjdf”或其他内容，您知道），并且正如我预期的那样，当我尝试提交时会弹出一条错误消息。但意外的部分是验证消息从文本框偏移约60个像素（给出或取几个）（请注意，电子邮件字段处于活动状态，但错误消息似乎指向密码字段）：

如果我删除所有样式并且只留下标记，则验证消息位置会得到改善，但是关于表单字段上的边距和填充量：

当我在Firefox中重复此过程时，验证会正确显示。

由于我们正在缩小问题范围，因此在表单标记之前显示type="email"标记会导致问题出现 - 如果我删除<h1>标记，则验证消息会排成一行正确。

这是Chrome中的错误吗？有没有办法可以强制Chrome的验证消息正确排列输入？为什么另一个标签会导致它不排队？

以下是您可以测试/验证的代码：

<h1>