【HTML5】IE11でwidthが効かない⁉︎ mainタグが原因だった

2016年12月25日

html5でコーディングをしていて、コーディング後のブラウザチェックをしていると、IE11で崩れている！widthを指定しているのに要素が横幅いっぱいに広がっている！ ということがありました。

IE7、8など旧バージョンならわかるのですが、IE11で！？
びっくりしたのですが調べてみると、html5のmainタグを使っていたことが原因でIE11で崩れが起きていました。

mainタグは、IE11でではブロック要素として認識されないようで、対処方法として、mainタグにdisplay: inline-block; を指定してあげることで簡単に解決できました。

css

.sample{
display: inline-block;
}

新しいタグを使用すると、新しいブラウザでも不具合がおきてしまうことがあるんですね^^;
気をつけましょう！

参考サイト：
http://qiita.com/rukiadia/items/9c8191590dc151d6ae85