CSSで外部リンク用アイコンを設定するときの悩み
このブログでも、サイト内リンクと外部リンクを区別するために、外部リンクにだけアイコンを表示させています。 つい最近までは、外部リンクのa要素に自分で「class="outside"」をつけて、次のようなCSSを設定していました。 a.outside { margin-right: 1px; padding-right: 13px; background-image: ur...
このブログでも、サイト内リンクと外部リンクを区別するために、外部リンクにだけアイコンを表示させています。
つい最近までは、外部リンクのa要素に自分で「class="outside"」をつけて、次のようなCSSを設定していました。
a.outside {
margin-right: 1px;
padding-right: 13px;
background-image: url(/blog/images/link_outside.gif);
background-position: center right;
background-repeat: no-repeat;
}ここで、先日yuga.js 0.5.1 を導入してみたので、クラスの設定は自動化され、ついでに外部リンクのみ別ウィンドウで開くようになりました。
さて、これまでは自分のブログなんてFirefoxでしか見たことがなかったから気がつかなかったのですが、このCSSの設定だとIEで見るとちょっと問題があることに、いまさら気が付きました。
リンクが1行だけのときは何の問題もないのですが、2行にまたがったときに背景画像のアイコンがうまく表示されなくなっちゃいます。
[1行のとき]
[2行のとき]
どうもIEは、インライン要素のボックスモデルの解釈が違うみたい。
さてさて、何か解決策はないものかといろいろ考えてみるも分かりませんでしたので、この際IEでは表示されなくしちゃおうかな、といことにしました。このブログを読んでくれているIEユーザーは全体の4割弱（1位は5割弱でFirefox）だったので微妙な判断ですが、「表示の乱れ」っぽいのよりも最初からない方がいいかなということで。
結局、外部リンクのCSSは以下のように設定しました。
a.externalLink:after {
content:url(/blog/images/link_outside.gif);
vertical-align:middle;
margin:0 2px;
}【参考リンク】
CSS で外部リンクにだけアイコンを表示（WWW WATCH）
この設定ならIEは何も表示されず、FirefoxやSafari、Operaなら表示されます。ただし、外部リンク用アイコンのところまでリンクのアンダーラインが引かれちゃうのが少し気になったりもしますので、後日変更するかも。
, Updated 2019-06-25