2016-12-16

table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう

CSS

Firefox と IEでもあやしかったんですが、 table が border-collapse で position: relative 使ってる td にホバーで背景色つけるとかすると、ボーダーが背景色より後ろにいってしまう、というバグがありました。

position: relative; している td に background-clip: padding-box; をつけると回避できました。

td {
   position: relative;
   background-clip: padding-box;
}

参考：css - Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell - Stack Overflow

2016-12-01

gulp media queries まとめる系プラグインで @supports が消えてる件

CSS gulp

かなり前に gulp-combine-media-queriesがエラーでコンパイルできなくなって、この issue から gulp-merge-media-queries に乗り換えてしばらく大丈夫だったのですが、とあるところを修正中に @supports が消えてることに気づきました。

いろいろ調べてたらけっこういろんなところで issue にあがっているけど解決されておらず。。

比較的あたらしめの、gulp-group-css-media-queries をためしてみたら、@supports 消さずにメディアクエリをまとめてくれた、という報告です。

github.com

2016-09-28

IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出る

IE CSS

IEで、position: absolute; left: 50% と translateX(-50%); で、中央に配置している要素の親要素にスクロールバーが出るというのでハマったのでメモ。

f:id:nakagaw:20160928195444p:plain

こんな感じ。 translateX(-50%); してるのが勘定にはいってないのか、してない体でスクロールバーが出ちゃってるといった様子。

もう、親要素に overflow: hidden; つけてスクロールバー消すしかないかなぁ、と思ったんですが、それだと、意図しないところでスクロールできない！みたいなことがあるので、あんまりやりたくなくて。結局、何が原因なのかなぁ、、といろいろな角度から検索してたらとうとう同じ悩みをもった人が見つかりました。stackoverflow 最高。

stackoverflow.com

まとめると