Css Chrome电子邮件输入字段内置验证警告视觉偏移
我正在为一个迷你应用程序构建一个超级简单的注册表单，并认为如果可以的话，使用浏览器内置的HTML5验证会很有趣-因此我为表单aCss Chrome电子邮件输入字段内置验证警告视觉偏移,css,html,google-chrome,Css,Html,Google Chrome,我正在为一个迷你应用程序构建一个超级简单的注册表单，并认为如果可以的话，使用浏览器内置的HTML5验证会很有趣-因此我为表单atype=“email”输入了文本，以获得乐趣。将其加载到Chrome（27.0.1453.116）中，并尝试输入无效电子邮件（“lksjdf”或其他内容，您知道），当我尝试提交时，正如预期的那样，会弹出一条错误消息。但意外的是，验证消息与文本框的偏移量约为60像素（给或拿几个）（请注意，电子邮件字段处于活动状态，但错误消息似乎指向密码字段）： 如果删除所有样式并只保留
type=“email”<!DOCTYPE html>
<html>
<head>
<title>Sample App | Sign Up</title>
<!-- stripped out styles and js -->
</head>
<body>
<!-- stripped out other irrelevant markup -->
<h1>Sign Up</h1>
<form accept-charset="UTF-8" action="" id="new_user" method="post">
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" size="30" type="text" />
<label for="user_email">Email</label>
<!-- This is the validation test field! -->
<input id="user_email" name="user[email]" size="30" type="email" />
<label for="user_password">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
<label for="user_password_confirmation">Confirm Password</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
<input class="btn btn-large btn-primary" name="commit" type="submit" value="Create my account" />
</form>
</body>
</html>
示例应用程序|注册
注册
名称
电子邮件
密码
确认密码