position: absolute; で border の枠線が消える例

・ソースはこの HTML を見てください。
・position: absolute; を指定すると border の枠線が一部消える場合がある。
・background-clip: padding-box; を指定すると枠線が表示される。

その1: 枠線が消える例

table の th要素を position:relative; にしたサンプル。
正常に表示 : Edge94
問題あり   : IE11、Firefox95 で border の枠線が一部表示されなくなる。

	th1	th2	th3
1
2
2

その2: background-clip: padding-box; を指定する

th 要素に background-clip: padding-box; を追加。
th の border の枠線が正常に表示される。

(ノート)
・background-clip: padding-box; 指定は背景色設定より後に入れること
th {
	background: #fcc;              /* 背景色設定 */
	background-clip: padding-box;  /* 背景色設定より後に入れる */
}

	th1	th2	th3
1
2
2

(2020/05-2022/03)