<div id="head">

外部リンクをyahoo!みたいにしたい　IEで見たときのバグ回避方法

このページでは var myArea = ""; でページ全部に外部リンクにアイコンが付くように設定してあります。
　

<div id="left">

ＨＯＭＥ
↑(内部)
スパムメール対策実験
↑(内部)
phpBB2　MOD　導入覚
↑(内部)
迷惑メール対策実験室
↑(外部　class="ynw"指定)

迷惑メール対策実験室
↑(外部)

ＰＤＦファイル(3kb)
↑(PDF　class="nnw"指定)

<div id="right">

こちらのページはCSSでアイコンに横マージンをとっています、前頁と比べてください

今回、「外部リンクをyahoo!みたいにしたい」と思い、JavaScriptを勉強して？迷惑メール対策実験室自分なりにやってみました。（←リンク途中で行がかわったら？）
ＩＤの"right"と"footer"の中で適用するように設定してあります。
pdfTypeを1に設定でＰＤＦファイルはどこにあってもＰＤＦファイルアイコンが付くようにしてあります。

ＨＯＭＥ　　　　　　　　　　　　　←(内部)
スパムメール対策実験　　　　←(内部)
phpBB2OD導入覚　　　　←(内部)
迷惑メール対策実験室 ←(外部)※1
ＰＤＦファイル(3kb)　　　←(PDF)

※↑IEでみても行間が直っていると思います※

IEのバグ：
行間を指定(line-height)していても画像(img)などの置き換え要素を含む場合、
line-heightで指定している値よりも小さくなってしまう。

回避方法
たとえばline-height:1.3em; で設定している場合 （130%　1.3）
「line-heightでは単位なしが望ましい」とのことなので、
このページではline-height:1.3;で書いています

/*--------------------------------*/
a img {
border-style:none;
padding:0.3em 0.2em;
vertical-align:middle;
}
a > img {
border-style:none;
padding:0 0.2em;
}
/*--↑この部分をスタイルシートに加える -*/

a img {
border-style:none; /*ボーダーを0--これを記入したらexLink、exPdfのborder="0"の部分を削除できます*/
padding:0.3em 0.2em; /*余白を調整--上下にline-heightで設定した余白部分(line-height:1.5em;なら0.5emに)、ついでに左右に余白をつけます　*/
vertical-align:middle; /*上下に余白が付いていますので真ん中に配置*/
}
a > img { /*IE以外の場合*/
border-style:none;
padding:0 0.2em; /*IE以外は上下に余計な余白をつけなくてもＯＫ、左右にはつけてみる*/
}

※em(相対単位)を使っていますが全部文字のサイズが同じであればpxでもかまいません
※左右の余白はご自由に設定してください、
　 ちなみに前のページは左右余白がありません
　 このページは 0.2emで設定しています、比べてみてください
※div で id　ごとに line-heightを設定している場合はid ごとに上記を書く必要があります

　　

<div id="footer">

ＨＯＭＥ　　　　　　　　　　　　　　　←(内部)
スパムメール対策実験室　　　　←(内部)
phpBB2　MOD　導入覚書　　　　←(内部)
迷惑メール対策実験室　　　　　←(外部)
yahoo! 　　　　　　　　　　　　　　　←(外部)

　　

は外部サイトへのリンクです（アイコンをクリックすると新しいウィンドウ・タブで開きます）
↑ページの下あたりにこんなコメントを書いておけばより親切だと思います