目次
main要素にpadding-bottomが効かない?
mainとfooterの間にすき間を空けたいときに、main要素にpadding-bottom:50px;のようにpaddingをつけて一定間隔を保つことがよくありますが、出来上がったと思ってブラウザチェックをかけたらIEで死んでる☠
そう、なぜかIE11ではpadding-bottomが効きませんでした。(padding-topも、いえ、paddingが効きません)
理想
![](https://deep-space.blue/main/wp-content/uploads/2018/01/44d29d2792be3bad9a9ed98c7bbb20d6-1.jpg)
現実(IE11)
![](https://deep-space.blue/main/wp-content/uploads/2018/01/0e4aae38a1f5494592124a884058f7cb.jpg)
IE11でpaddingが効かない理由と解決策
IE11(というかIE9以降)では、main要素のdisplayプロパティはinlineになっています。
Chromeやfirefoxではデフォルトでblockなのですが、IEのためにcss上でdisplay:blockを指定してあげましょう。
補足:IE11でmain要素にbackgroundも効かないことがある
paddingと同様に、main要素がdisplay:inlineとして認識されたままだと、backgroundの画像表示なども正常に反映されませんので、やはりmain要素はdisplay:block;としてcss上で指定してあげるようにしましょう。
コメント