ブログ

【CSS】position:relativeを指定したthやtdのボーダーが消える原因

このページのコンテンツ

FireFoxで起こるバグ

thtdに、position:relativeを指定するとなぜかボーダーの一部が消えてしまう場合があります。

こんな感じ…

これは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;
}

この記事を書いた人管理人

SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の指導を行っております。

SAKURAGRAPHICAができること

最近の記事 おすすめ記事
PAGE TOP