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

  • URLをコピーしました!
目次

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上で指定してあげるようにしましょう。

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次
閉じる