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

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

良い方法はないようですね。すくなくともウェブ標準に合わせては無理です。
　で、ちょっと無理やりっぽい方法ですが、
<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

このままのソースでは無理です。
・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ではベースラインではなく、画像の下部に線が引かれます。
ここまでできると、あとちょっとという感じですが、なんとかなるのでしょうか？？

回答No.2

ORUKA1951

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);
}
インデントのため、タブを全角スペースに置き換えてます。

お礼

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

回答No.1

ORUKA1951

ラインの上に画像をおけば隠れてしまいますよ。
img.middle { vertical-align: middle; }
を消すとどうなりますか?

お礼

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

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