htmlフォーム内のaタグ内のbuttonの挙動について

Question

なぜ今まで気づかなかったのか分かりませんが、

<form><a><button type="button">の組み合わせでIE10以下ではリンク先が開かないという問題に遭遇しました。これは有名な不具合なのでしょうか? 問題の箇所は下記の最初のformブロックです。 テキストリンクをボタン風に見せるとか、画像にするとか対応策は思いつきますので、これについての回答は不要ですが、 なぜIE10まで問題が放置されていたのか知りたいです。雑談でも結構です。 ```html <!--IE10以下では動作しない--> <!--IE11,Edge,FireFox,Chromeは正常：リンクが開く--> <form> <a href="http://yahoo.co.jp/" target="_blank"><button type="button">Yahoo</button></a> </form> <!--正常：formがsubmitされる--> <form> <a href="http://yahoo.co.jp/" target="_blank"><button>Yahoo</button></a> </form> <!--正常：リンクが開く-->

<a href="http://yahoo.co.jp/" target="_blank"><button type="button">Yahoo</button></a>

<!--正常：リンクが開く-->

<a href="http://yahoo.co.jp/" target="_blank"><button>Yahoo</button></a>

Answer 1

理由は分かりませんが、想像するに他ブラウザの挙動に合わせたのでは、と思います。
というのも、そもそもa要素の子要素としてbutton要素はネストすることができません。
HTML5 validatorなどでテストしてみるとエラーが出ることが確認できると思います。

バリデータ
https://html5.validator.nu/

英語ですが、似たような質問がありました。
http://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5

Comments

[rik]

なるほど。IEは悪くなかったという事ですね。納得しました。
むしろ悪いのはコーディングルールに沿っていなかった私でしたか。
今後書き方に気を付けます。
色々情報も頂きましてありがとうございます。