Firefoxでテーブルのthとかtdにはposition:relativeが効かない件
Firefoxでは、テーブルのthとかtdにはposition:relativeが効かないというか。 borderとかが消えたりとかします。
しかし、真実は、ChromeやIEが独自の実装をしているだけで、本当の正義はFirefoxにあると。
どういうシーンで起こるか
th内の右上とかに小さいボタンを置くときにわざわざthの中で、ブロックを2つに分けてフロートとかさせるのはちょっとしんどい。なので、positionでやろうとすると、thにposition: relative;をかけることになるので、起こる。という具合です。
解決方法
単純にdivをかまして、そっちにposition: relative;をかける。
th.inBtn {
padding: 0 !important; /* table全体でかけてる内側パディングとる */
}
th.inBtn > div {
position: relative;
padding: 10px 30px 10px 10px; /* thの内側パディングをこっちでとる */
}
a.btn {
display: block;
position: absolute;
right: 10px;
top: 10px;
}
けっこう多いみたいですが、恥ずかしながら初体験でした。
参考:table系にはposition:relativeが効かない – No.1026
参考:スマホサイトでtd/th要素へのposition:relativeはダメ! - to-R