このページのコンテンツ
FireFoxで起こるバグ
thやtdに、position:relativeを指定するとなぜかボーダーの一部が消えてしまう場合があります。
![](https://sakuragraphica.jp/contents/wp-content/uploads/2020/08/20200803114016-1024x77.jpg)
これはFirefoxでの閲覧時におこるバグで、以下の条件下で発生します。
- tableにborder-collapse指定
- tdやthにborderを指定
- tdやthにposition: relativeを指定
解決方法!
position: relative;を指定した要素にbackground-clip: padding-box;を追加!
table { border-collapse: collapse; } table th { border: 1px solid #ddd; background-color: #f7f7f7; padding: 10px; position: relative; background-clip: padding-box; }
![](https://sakuragraphica.jp/contents/wp-content/themes/agenda_tcd059_child/images/profile.jpg)
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。