IE8より古いブラウザにおいてリンクが作動しない問題の改善方法を教えてください。

最近所用でホームページを作成することとなり、ある程度まで概成させたのですがリンクが作動しない問題が発生し、改善方法がわからず悩んでおります。
ボタンにリンクを貼っており、Edgeやfirefox、googleでは問題なくリンクが機能するのですが、何故かIE8より以前のIE環境下ではクリックしてもリンクが作動しません。
改善方法をご教示頂けると幸いです。

ボタンのソース
<a href="aaa.html"><button class="button_topnav" type="submit">aaa</button></a>
<a href="bbb.html"><button class="button_topnav" type="submit">bbb</button></a>
<a href="ccc.html"><button class="button_topnav" type="submit">ccc</button></a>

css
button.button_topnav{
font-size:15px;
padding:20px;
background-color:navy;
color:white;
border-style:none;
transition:background-color 1s,color 1s;
}

button.button_topnav:hover{
background-color:aqua;
color:white;
}

No.3 ベストアンサー 回答者： yambejp 回答日時： 2016/02/23 18:20

もうボタンじたいやめちゃうとか

<style>
a.button_topnav{
display:inline-block;
text-decoration:none;
font-size:15px;
padding:20px;
background-color:navy;
color:white;
border-style:none;
transition:background-color 1s,color 1s;
}
a.button_topnav:hover{
background-color:aqua;
color:white;
}
</style>
<a href="aaa.html" class="button_topnav">aaa</a>
<a href="bbb.html" class="button_topnav">bbb</a>
<a href="ccc.html" class="button_topnav">ccc</a>

古いIEはアンカー以外のhoverが利かなかったかもしれないので
むしろこちらの方がよいかも。

この回答へのお礼

No.3の方法で作成してみたところ、無事IE7において動作を確認しました。
ありがとうございます。
<style></style>の中身に関して、cssの方に移す必要等はありますでしょうか？

お礼日時：2016/02/23 19:19

No.4 回答者： yambejp 回答日時： 2016/02/23 19:49

＞<style></style>の中身に関して、cssの方に移す必要等はありますでしょうか？

質問の意味がよくわかりませんが。
・外部CSSとする
・styleタグで指定する
・タグのstyleパラメータで指定する

どれでも好きにすればいいと思います
（今回は回答での視認性を高めるためstyleタグを使いました）

この回答へのお礼

御指摘感謝いたします。
css等についてもより勉強し、適宜更新していきたいと考えます。
無事リンクが飛ぶようになりました。ありがとうございました。

お礼日時：2016/02/23 20:18

No.2 回答者： fujillin 回答日時： 2016/02/23 17:53

想像するところ、submitする必要がなさそうなので・・・

環境がないので、テストできませんが、type="button"に変えて
　<button type="button" class="button_topnav">aaa</button>
にしてみても、やはりうまくいきませんか？

No.1 回答者： yambejp 回答日時： 2016/02/23 17:32

そもそもbuttonをアンカー(a)で囲むっていうのがどうかと思いますが・・・

＞IE8より以前のIE環境下ではクリックしてもリンクが作動しません。
これはサブミットが優先されるということでしょうか？
それともうんともすんともいわないということ？

この回答へのお礼

早速の返信感謝します。
申し訳ございません、当方学び始めたばかりで表記の方法もあやふやでございます。
よりよい表記の仕方についても教示頂けると幸いです。
現在の状況として、クリックした際のボタンの表示動作(クリックしたときのへこむような動作)は確認できますが、リンクが作動せず他のページに飛ばないという状況です。

お礼日時：2016/02/23 17:41