CSSで外部リンク用アイコンを設定するときの悩み

このブログでも、サイト内リンクと外部リンクを区別するために、外部リンクにだけアイコンを表示させています。

つい最近までは、外部リンクのa要素に自分で「class="outside"」をつけて、次のようなCSSを設定していました。

a.outside {
	margin-right: 1px;
	padding-right: 13px;
	background-image: url(http://www.tinybeans.net/blog/images/link_outside.gif);
	background-position: center right;
	background-repeat: no-repeat;
}

ここで、先日yuga.js 0.5.1 を導入してみたので、クラスの設定は自動化され、ついでに外部リンクのみ別ウィンドウで開くようになりました。

さて、これまでは自分のブログなんてFirefoxでしか見たことがなかったから気がつかなかったのですが、このCSSの設定だとIEで見るとちょっと問題があることに、いまさら気が付きました。

リンクが1行だけのときは何の問題もないのですが、2行にまたがったときに背景画像のアイコンがうまく表示されなくなっちゃいます。

[1行のとき]
リンクが1行のときの外部リンクのアイコン表示

[2行のとき]
リンクが2行のときの外部リンクのアイコン表示

どうもIEは、インライン要素のボックスモデルの解釈が違うみたい。

さてさて、何か解決策はないものかといろいろ考えてみるも分かりませんでしたので、この際IEでは表示されなくしちゃおうかな、といことにしました。このブログを読んでくれているIEユーザーは全体の4割弱(1位は5割弱でFirefox)だったので微妙な判断ですが、「表示の乱れ」っぽいのよりも最初からない方がいいかなということで。

結局、外部リンクのCSSは以下のように設定しました。

a.externalLink:after {
     content:url(http://www.tinybeans.net/blog/images/link_outside.gif);
     vertical-align:middle;
     margin:0 2px;
}

【参考リンク】
CSS で外部リンクにだけアイコンを表示(WWW WATCH)

この設定ならIEは何も表示されず、FirefoxやSafari、Operaなら表示されます。ただし、外部リンク用アイコンのところまでリンクのアンダーラインが引かれちゃうのが少し気になったりもしますので、後日変更するかも。

:after疑似要素で外部リンク用アイコンを表示させた場合

  • このエントリーをはてなブックマークに追加
Just a second...