IE8 こと Internet Explorer 8 、もしくはそれ以前のIEでは、aタグとbuttonタグの組み合わせは動作しない。
今更、IE8を気にする必要もないかと思っていたが、未だにXPユーザーがいることと、古いシステムでは、メタタグに以下のように書いてある場合がある。
<meta http-equiv="X-UA-Compatible" content="IE=8">
これは、IE8モードで動作するように指定するメタタグで最新のIEでも互換モードで動作する。
そんなこんなで下記のように、buttonタグをaタグで囲んだら動作しなかった。
<a href="http://www.google.co.jp/" target="_blank">
<button class="btn btn-default" >Open Google</button>
</a>
ボタンが押されたら別ウィンドウを立ち上げる。
inputのsubmit等とレイアウトは合わせたいが、formタグに干渉させたくない場合に使うことになった。
で、結局onclick属性にJavaScriptを書いて解決させた。
ページ内移動、ページ遷移、ページ立ち上げ、をonclickのJavaScriptでそれぞれ書いてみた。
location.hashでページ内移動
<button class="btn btn-default" onclick="location.hash='footer'">GoToFooter</button>
location.hrefで別ページ移動
<button class="btn btn-default" onclick="location.href='http://www.google.co.jp/'">Go Google</button>
window.openで別ページ立ち上げ
<button class="btn btn-default" onclick="window.open('http://www.google.co.jp/');">Open Google</button>
下記リンクはデモページ。
通常のモダンブラウザは問題ないが、IE8以前だと、動かないボタンがある。
Demo ページ : IE8以前はaタグbuttonは動作しない
Windows XP のサポートが終わり、IE8が完全に無くなっても、メタタグが無くならない限り、まだまだこの方法を使う時はくるかもしれない。