FFでposition:relativeにするとbackground-color設定してあるtdのborderが消える css 2016年11月18日 表題のとおりですが、 Firefoxでtableのtdにbackground-colorとposition:relativeとborderを同時に設定すると borderが消えます。 百聞は一見にしかず。 これをFFで見てみてください。 http://codepen.io/anon/pen/PbbyvN/ はい、borderが消えてます。 tdにposition:relativeなんて設定してるからじゃん、と思いますね。 私もそう思います。 ただ、tdにキレイに下付きにボタンを配置したい＆tdの中の高さが変わる場合は、 tdにボタン分のpadding-bottomをつけてやって、absoluteで配置したいということがあると思います。 何の話をしてるのか分からない人は、 どういう状況のことかcodepenでどうぞ。 http://codepen.io/anon/pen/RooqbP これでborderが消えてるよ！とのご指摘がありました。 困ったなーと思っていろいろやった結果、解決策が見つかりました！ borderの消えているtdに以下のスタイルを追加してみてください。 background-clip: padding-box; 直ったー♪ http://www.htmq.com/css3/background-clip.shtml 引用： background-clipプロパティは、背景の適用範囲を指定する際に使用します。 padding-box 背景をパティングボックスに適用する paddingから背景を適用することにより、borderが消えるのを回避できました。 皆さんも、こんな現象に出会ったら、使ってみてください。 ブラウザサポートもIE9から対応しています。 http://caniuse.com/#search=background-clip では！さらばだ！ [17回]PR
[17回]