IE の SVG バグ対応

暴走して全て消し去ってしまった際にインスタのアカウントも消しちゃったし、ブログ再開に伴い各種フォローボタンの入れ替え整理作業をするべく、久し振りに SVG アイコンの CSS を弄ったんだけど、IE でチェックしてみたら・・・

一瞬パニクったが、冷静になったら思い出した。IE の SVG バグ対応策。

他のブラウザは 高さか幅のどちらかを指定してやれば、つまり例えば height だけ指定すれば width は未指定でも 自動補正してくれるんだけど、IE の場合はきっちり両方指定してやんないと指定しなかった方のサイズが暴走してしまうのでした。どいつもこいつも暴走好きだなw それにしてもほんと IE っていちいちめんどくさい。

ところで、なんで Font Awesome さん、今だに Feedly のアイコン追加してくれないんだろうか。はてブも入れてほしいし。全部 ウェブアイコン で統一できればこんな苦労しなくて済むのにね。今度気が向いたらリクエストでもしてみようかな。

ということで、CSS を修正追記して、height と width 共に数値を指定してみた。

/* SVG icons */
.feedlysvg {
    fill: #c5c5c5;
    width: 30px;
    height: 36px;
    vertical-align: -30%;
}
.hatebusvgfollow {
    width: 40px;
    height: 40px;
    vertical-align: -22%;
    fill:#c5c5c5;
}

結果、綺麗に横一列に並んでくれました。

ちなみにカメラアイコンは Google フォトです。

以上、IE の暴走を阻止する方法(？)でした。