CSSCSSで外部リンク用アイコンを設定するときの悩みCSSで外部リンク用アイコンを設定するときの悩みこのブログでも、サイト内リンクと外部リンクを区別するために、外部リンクにだけアイコンを表示させています。最近までは、外部リンクのa要素に自分で「class="outside"」をつけて、次のようなCSSを設定していました。導入してみたので、クラスの設定は自動化され、ついでに外部リンクのみ別ウィンドウで開くようになりました。これまでは自分のブログなんてFirefoxでしか見たことがなかったから気がつかなかったのですが、このCSSの設定だとIEで見るとちょっと問題があることに、いまさら気が付きました。リンクが1行だけのときは何の問題もないのですが、2行にまたがったときに背景画像のアイコンがうまく表示されなくなっちゃいます。[1行のとき][2行のとき]どうもIEは、インライン要素のボックスモデルの解釈が違うみたい。何か解決策はないものかといろいろ考えてみるも分かりませんでしたので、この際IEでは表示されなくしちゃおうかな、といことにしました。このブログを読んでくれているIEユーザーは全体の4割弱(1位は5割弱でFirefox)だったので微妙な判断ですが、「表示の乱れ」っぽいのよりも最初からない方がいいかなということで。結局、外部リンクのCSSは以下のように設定しました。WATCH)この設定ならIEは何も表示されず、FirefoxやSafari、Operaなら表示されます。外部リンク用アイコンのところまでリンクのアンダーラインが引かれちゃうのが少し気になったりもしますので、後日変更するかも。