ミニアプリ用の非常にシンプルなサインアップフォームを作成していて、できればブラウザーに組み込まれている HTML5 検証を使用するのが楽しいと思ったので、フォームのテキスト入力をtype="email"ファンジー用にしました。Chrome (27.0.1453.116) にロードし、無効な電子メール (「lksjdf」など) を入力しようとすると、送信しようとすると予想どおりエラー メッセージが表示されます。しかし、予想外だったのは、検証メッセージがテキスト ボックスから約 60 ピクセルずれていたことです (多少の誤差はありますが) (電子メール フィールドはアクティブですが、エラー メッセージはパスワード フィールドを指しているように見えます)。
すべてのスタイリングを削除してマークアップだけを残すと、検証メッセージの位置が改善されますが、フォーム フィールドにあったマージンとパディングの量については次のようになります。
Firefox でこのプロセスを繰り返すと、検証が正しく表示されます。
問題を絞り込んでいると<h1>、フォーム タグの直前にタグがあると問題が発生するようです<h1>。タグを削除すると、検証メッセージが正しく表示されます。
これはChromeのバグですか？Chrome の検証メッセージを強制的に入力と一致させる方法はありますか? 別のタグが原因で整列しないのはなぜですか?
テスト/検証できるコードは次のとおりです。
<!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>