HTMLの文章中の画像のベースラインに下線を引くには

XHTML1.0 で下記のような文に対し, <a>～</a> のベースラインに下線を引きたいです。つまり img タグで表示する画像に下線を引きたいということです。
*************HTML***********************
これはテスト<a href="test"><img src="image.gif" width="20" height="33" class="middle" alt="1" /></a> です。
*************CSS************************
img.middle {vertical-align: middle; }
****************************************
テキストだと下線が引かれますが、画像だと引かれないようです。
なお、下線は画像の下のふちではなく、テキストのベースラインに引きたいです。
CSS でどのような指定をしたら下線が引かれますか？

No.4 回答者： ORUKA1951 回答日時： 2008/10/24 23:31

遅くなりました。

納期が決まっている仕事があって、ここしばらくは・・

良い方法はないようですね。すくなくともウェブ標準に合わせては無理です。
　で、ちょっと無理やりっぽい方法ですが、
<p>
　<a href="test"><img src="imageO.gif" width="20" height="16" class="over" alt="1" /></a><img src="imageO.gif" width="20" height="17" class="under" alt="2" />
</p>
と二つに分けて、
img.under{
　position:relative;
　left: -20px;
　top:15px;
}
とか・・・くらいですかね。

No.3 回答者： ORUKA1951 回答日時： 2008/10/22 18:33

このままのソースでは無理です。

・underlineはテキストがまったくないと引かれない。
　後ろか前に、スペースを置くだけでテキストのベースラインに線が入ります。なお、&#x200b;(Zero-wide-space)でも線が入るのはFirefoxだけです。
・<a>アンカー</a>にボーダーを引くために、<a>アンカー</a>にclass属性で指定すれば可能
<a href="[URL]" style="border-bottom: 1px solid red"><img ****></a>

この回答へのお礼

お返事ありがとうございます！
1つ目の方法では、下線ははいらないようです。
全角の空白か, 空白以外の半角文字を入れると下線が入りますが, これは避けたいです。
2つ目の方法では、FireFox ではバッチリなのですが、IEではベースラインではなく、画像の下部に線が引かれます。
ここまでできると、あとちょっとという感じですが、なんとかなるのでしょうか？？

お礼日時：2008/10/23 16:13

No.2 回答者： ORUKA1951 回答日時： 2008/10/17 18:21

CSSです。

/* リンク内の画像の枠をデフォルトではなし */
a img{
　border: none;
}
/* リンク */
a:link img.middle{
　border-bottom: solid 2px rgb(0,0,255);
}
/ *訪問済み */
a:visited img.middle{
　border-bottom: solid 2px rgb(0,0,136);
}
/* マウスオーバー時 */
a:hover img.middle{
　border-bottom: solid 2px rgb( 0,136,255);
}
/* アクティブなリンク */
a:active img.middle{
　border-bottom: solid 2px rgb( 155,0,255);
}
インデントのため、タブを全角スペースに置き換えてます。

この回答へのお礼

ご提示いただいた方法だと、下線は画像の下のふちに沿って引かれてしまいます。
下線は画像の下のふちではなく、テキストのベースラインに引きたいのですが、
どのように実現可能でしょうか

お礼日時：2008/10/22 11:19

No.1 回答者： ORUKA1951 回答日時： 2008/10/17 17:00

ラインの上に画像をおけば隠れてしまいますよ。

img.middle { vertical-align: middle; }
を消すとどうなりますか?

この回答へのお礼

加工した文字を画像として保存し、ライン上に表示しています。
文字以外の部分は透過なので、下線が引かれれば見えるはずです。
img.middle { vertical-align: middle; }
を消しても下線は表示されませんでした。
なお、画像の位置がずれてしまうので、
img.middle { vertical-align: middle; }
は残すことが必須になります。

よろしくお願いいたします。

お礼日時：2008/10/17 17:32