CSS

2021.06.09

FirefoxやIEでoverflowを使うとpaddingが効かない時の解決法

最近チャットボットのコーディングをしていたときにこのバグに遭遇したのですが、FirefoxやIEではoverflowにscrollやautoを効かせてスクロールできるようにしたとき、同じ要素に設定したpaddingが消えてしまいました。

今回はこの解決案をご紹介します!

padding-bottomが効かない

実際にコーディングをしてみます。

See the Pen FirefoxとIEでpaddingが消える問題01 by spiqa design (@spiqa_design) on CodePen.

グレー背景のdivの上下にpaddingを50px、overflow-y:scrollをつけています。
divに高さを指定しているのでpタグ達がスクロールされます。

Firefoxで見るとpadding-bottom:50pxが無くなっています。
(ぜひ実際のブラウザでご確認ください)

解決策

paddingで余白を取らない

少々力業ではありますが、padding-bottom分の余白はpaddingで取らずに疑似要素で余白を作ります。

See the Pen FirefoxとIEでpaddingが消える問題02 by spiqa design (@spiqa_design) on CodePen.

divに対して疑似要素のafterでpadding-bottomと同じだけの高さ50pxを取りました。
これでFirefoxとIEでも余白が付きます。

あまりこの方法は取りたくありませんが、いざというときには是非ご活用ください。

関連記事はこちら!

この記事をシェアする

関連記事

  • 2023.12.29

    記事タイトルを行数で制御するCSS

    CSS

    コーディング

  • 2023.12.28

    色違いは必要ない!アイコンはcssで色を変えよう!

    CSS

    コーディング

  • 2023.11.14

    コーダー同士の情報のやり取りで効率がアップした話

    CSS

    コーディング

おすすめ記事

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

×