IE11でサイドバー用にmainタグにpaddingを入れたのに効かない件

IE11だけmainタグにpaddingが効かない、mainタグ内の子要素が軒並み親要素をはみ出してうまく表示されない。( はみ出してるように見えただけでpaddingが効いてないだけでした。 )

しばらくハマったので調べてみた結果メモ。

実現したいイメージ

こんな感じでサイドメニューとメインコンテンツを配置。メインコンテンツのmargin、もしくはpaddingをサイドメニューのwidth分指定したかった。

ChoromeやFirefox、Edgeでも思った通りに表示されているのにIEだけダメ。結果としては、IE11ではmainタグ自体がinlineになっているようで、こいつを以下のようにすれば対処可能のようです。

display: block

ただ、mainタグ自体にスタイルを当てるのはちょっと怖いなと思ったので、mainタグ以下をdivなどでwrapper要素を作った方が良さそうだなと思いました。

chevron_left
chevron_right

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Comment
Name
Email
Website