IE11だけmainタグにpaddingが効かない、mainタグ内の子要素が軒並み親要素をはみ出してうまく表示されない。( はみ出してるように見えただけでpaddingが効いてないだけでした。 )
しばらくハマったので調べてみた結果メモ。
こんな感じでサイドメニューとメインコンテンツを配置。メインコンテンツのmargin、もしくはpaddingをサイドメニューのwidth分指定したかった。
ChoromeやFirefox、Edgeでも思った通りに表示されているのにIEだけダメ。結果としては、IE11ではmainタグ自体がinlineになっているようで、こいつを以下のようにすれば対処可能のようです。
display: blockただ、mainタグ自体にスタイルを当てるのはちょっと怖いなと思ったので、mainタグ以下をdivなどでwrapper要素を作った方が良さそうだなと思いました。