一度ミスっていて修正したのに、再度同じようなミスをしたので、備忘録です。
下記のようなコードを書いて、下記のようなアイコン付きボタンを表示している場合、IE11だと動きません。
<a href="http://www.yahoo.co.jp/">
<button id="month_schedule" type="button" class="btn btn-outline-secondary"><i class="fas fa-calendar"></i></button>
</a>
a要素にはインタラクティブなコンテンツは入れてはいけないという決まりがあるためです。インタラクティブなコンテンツというのは、 ユーザーとの対話を特に目的としたコンテンツで、a,audio,button,input,select,label,objectなどです。
詳しくはこちら(翻訳を使ってください)
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
もしむりやり動かそうとするなら、javascriptを利用して下記のようにすれば動きます。
<input type="button" name="button" value="外部サイトへ" onclick="window.open('http://www.yahoo.co.jp', '_self')"></a>
と思ったら、今回はbootstrapのボタンをリンクにしたかっただけなので、
<a class="btn btn-lg" href="#" role="button">Link</a> で行けた。。。
