web関連

【css】linear-gradientがIEで反映されなかった時

2019/03/29

プログラミング

css

テキストにlinear-gradientで上から75%から90%部分だけ色をつけようとしたらchromeとfirefoxとsafariでは普通にcssが反映されるんだけどIE11でcssが反映されなかったので備忘録

書き方が微妙に違うとIE駄目みたい

background: linear-gradient(transparent 0%, transparent 0% 75%, #66ccff 75% 90%, transparent 90%);

位置の指定の書き方で「… 0% 75%」みたいに指定するのが駄目みたい

蛍光マーカーっぽい下線がつくよ

ダメって言ってもIE以外はちゃんと見えるんだけどさぁ

background:linear-gradient( transparent 0%, transparent 75%, #66ccff 75%,#66ccff 90%, transparent 90%);

「… 0% ,… 75%」って区切れば大丈夫みたい

蛍光マーカーっぽい下線がつくよ

ちゃんと位置の%はカンマ使って区切んないとだめなんすね

wordpressの記事詳細の見出しで使用したんだけど、見出しタグってブロック要素だから実際に「linear-gradient」で蛍光マーカーっぽくしようとすると横幅いっぱいまで引かれちゃってダサいので
見出しタグ内にspanを仕込むjsコード

仕込んだspanにcss設定してる

最近はベンダープレフィックスつけんでもモダンブラウザは大丈夫っぽいからつけてない