IE8 こと Internet Explorer 8 、もしくはそれ以前のIEでは、aタグとbuttonタグの組み合わせは動作しない。
今更、IE8を気にする必要もないかと思っていたが、未だにXPユーザーがいることと、古いシステムでは、メタタグに以下のように書いてある場合がある。
|
1 |
<meta http-equiv="X-UA-Compatible" content="IE=8"> |
これは、IE8モードで動作するように指定するメタタグで最新のIEでも互換モードで動作する。
そんなこんなで下記のように、buttonタグをaタグで囲んだら動作しなかった。
|
1 2 3 |
<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でそれぞれ書いてみた。
|
1 2 3 4 5 6 7 8 |
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が完全に無くなっても、メタタグが無くならない限り、まだまだこの方法を使う時はくるかもしれない。