その他

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

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

関連記事はこちら!

[card url=”http://note.spiqa.design/wp/css-browser/”]

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2023.12.26

    一本の線がユーザーに寄り添う話

    その他

  • 2022.08.10

    プレゼン資料で使える素材作ってみた -物流業界編 part 2 -

    その他

  • 2021.05.21

    【勝手にWEBサイトレビュー#34】FVにインパクトがあるフランスの食品メーカーのサイト

    その他

TAG

×