【css】IE11でmain要素にpaddingが効かないのはdisplay:inlineだから

main要素にpadding-bottomが効かない？

mainとfooterの間にすき間を空けたいときに、main要素にpadding-bottom:50px;のようにpaddingをつけて一定間隔を保つことがよくありますが、出来上がったと思ってブラウザチェックをかけたらIEで死んでる☠

そう、なぜかIE11ではpadding-bottomが効きませんでした。（padding-topも、いえ、paddingが効きません）

理想

現実（IE11）

IE11でpaddingが効かない理由と解決策

IE11（というかIE9以降）では、main要素のdisplayプロパティはinlineになっています。

Chromeやfirefoxではデフォルトでblockなのですが、IEのためにcss上でdisplay:blockを指定してあげましょう。

参考：http://xn--lcki7of.jp/786/

補足：IE11でmain要素にbackgroundも効かないことがある

paddingと同様に、main要素がdisplay:inlineとして認識されたままだと、backgroundの画像表示なども正常に反映されませんので、やはりmain要素はdisplay:block;としてcss上で指定してあげるようにしましょう。