2021年4月25日（日曜日）
Firefox で table の position:relative; を指定すると border が消える仕様というバグ
Category: ホームページ制作 | Posted By ackie at 17:49:29昨日の jQueryValidationEngine の table タグの問題。
position: relative; で回避できました。
た・だ・し！
Firefox では position: relative; と border と
background-color が共存できずに
線が消える仕様というバグがあるので注意してください。
おすすめはレイアウトに table タグを使わない…
ということで dl / dt / dd を使うのがいいかと？
もともとレイアウト目的で table を使うのはどうか？
と思うので jQueryValidationEngine.js を使うなら
違う方法がいいかもしれません。
さて前向きな対応方法としては
after 疑似要素を使うという方法があります。
th::after,
td::after {
position: absolute;
z-index: 2;
top: -1px;
left: -1px;
display: block;
content: '';
width: 100%;
height: 100%;
border: 1px solid #cccccc;
}
th や td に position: relative; を指定している場合、
この方法が利用できます。
top 、left で動かしてるのは th や td に
border を 1px 指定している場合、
上の例のように 1px 戻してください。
トラックバック URL
コメント&トラックバック
コメントフィード
コメント