CSS

2021.02.17

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でも余白が付きます。

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

関連記事はこちら!

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.08.03

    【コピペOK】パンくずリストの設置方法(便利なプラグインも紹介)

    CSS

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

おすすめ記事

  • 2021.09.14

    【薄くて軽い!】超おすすめパソコンスタンド

    その他

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

  • 2021.06.08

    簡単!蛍光ペンっぽいアンダーラインを引く方法

    CSS

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!