リンクで包括している画像とテキストの周りに枠線を表示させたい

例えば画像だけにリンクしているなら枠線は画像の周りに表示されるのですが、
画像の下にテキストを置いて、その２つをリンクで囲むと、
テキストだけに枠線がかかるようになり、ちゃんと画像とテキストの周りに枠線が表示されません・・・
理想としては次のようなかんじにしたいのですが、どう記述すればよいのでしょうか？

┌──┐
│画像│
│文字│
└──┘


<a href="画像へのURL" style="border: 1px solid rgb(51, 204, 255);">
<img src="image.jpg"><br>文字
</a>
↑
これだと枠線が画像とテキストを囲んでくれない

No.4 ベストアンサー 回答者： DOUGLAS_ 回答日時： 2009/12/16 08:15

＞たしかにIE8で試しているのですが、みなさんのとは微妙に環境がずれているのでしょうか？

　そうですね。
　トリッキー な表示方法は、特に ブラウザ やその バージョン に依存しますので、takagoo100 さんの パソコン上 のブラウザ では意図通りの表示になっていたとしても、第三者の環境では、こちらの意図通りの表示になっているかどうかは保証できません。

　例えば、「display: block; width: 0px;」のように width 属性値を指定せず、さらに「<nobr>・</nobr>」も使わないで「display: inline-block;」によって

<a href="画像へのURL" style="border: 10px solid rgb(51, 204, 255); display: inline-block;">
<img src="image.jpg" border=0><br>文字
</a>

としても、私の環境では意図通りの表示になります。

この回答へのお礼

ご回答ありがとうございます。
その後、KompoZerというソフトで作成しているからなのかと疑い、
メモ帳からhtmlファイルを作りそれを入力して試したところ同じようにできました。
たぶん文字コードなのかそこらへんの影響だとは思うのですが、
見た目では分かりずらいので発見が遅れました・・・
いずれにしても回答が参考になりました。ありがとうございます。

お礼日時：2009/12/17 00:34

No.3 回答者： DOUGLAS_ 回答日時： 2009/12/15 22:32

＞自分も display: block;で試していたのですが、

＞たしかにこれだとwidth:を調節すればちょうど全体を隙間なく囲めるのですが、
　ぁぁ、そぉでしたヵ．．．。
　それは、大変、失礼いたしました。　　<(_ _)>

<a href="画像へのURL" style="border: 10px solid rgb(51, 204, 255); display: block; width: 0px;">
<img src="image.jpg" border=0><br><nobr>文字</nobr></a>

この回答へのお礼

ご回答ありがとうございます。
うーん・・・それをまんまコピペして試してみたのですが、下のような感じになって
┌┐
│画像
││
│文字
└┘
width: 0pxを50pxとか100pxにすると枠が横に広がっていく感じです。
たしかにIE8で試しているのですが、みなさんのとは微妙に環境がずれているのでしょうか？

お礼日時：2009/12/16 00:39

No.2 回答者： DOUGLAS_ 回答日時： 2009/12/15 08:19

＞画像の下にテキストを置いて、その２つをリンクで囲むと、

＞テキストだけに枠線がかかるようになり、
＞ちゃんと画像とテキストの周りに枠線が表示されません・・・
とお書きですが、そうですか？

　お示しの html の「border: 1px」を「10px」に変えてみると、よくお分かりになるかと存じますが、<a> タグ に style で設定した border と <img> タグ 自体の border とが重なってみにくいだけかと存じます。・・・添付画像(1)

<a href="画像へのURL" style="border: 10px solid rgb(51, 204, 255);">
の部分を
<a href="画像へのURL" style="border: 10px solid rgb(51, 204, 255); display: block; width: 100px;">
のようにすると添付画像(2)のようになります。

　ちなみに、
<img src="image.jpg">
の部分は
<img src="image.jpg" border=0>
の方が スマート ですね。

この回答へのお礼

ご回答ありがとうございます。
自分も display: block;で試していたのですが、
たしかにこれだとwidth:を調節すればちょうど全体を隙間なく囲めるのですが、
そうではなくてwidth:を使うことなく（あるいは使ったとしても
小さいpxや%を指定した時に、画像がそれ以上の大きさなので自動的に枠線もふくらんでくれる）
やる方法はないでしょうか？

お礼日時：2009/12/15 16:19

No.1 回答者： pasocom 回答日時： 2009/12/15 05:26

質問文は

「画像の下にテキストを置いて、その２つをリンクで囲むと、
画像（テキストではなく）だけに枠線がかかるようになり、」ではありませんか？。
そうなるのが普通です。
解決法は、文字を画像にした「moji.jpg」を作成して
<a href="画像へのURL" style="border: 1px solid rgb(51, 204, 255);">
<img src="image.jpg"><br><img src="moji.jpg">
</a>

この回答へのお礼

ご回答ありがとうございます。
環境を書き忘れてましたが、IE8の環境下で試しています。
＞画像（テキストではなく）だけに枠線がかかるようになり、」ではありませんか？。
自分の環境ではこんな感じに表示されます・・・

┌画像
──┐│
文字├
──┘
←画面の左端

文字には左端だけ枠線が消えてる状態で、画像の方は画像の高さまで枠線がきてなくて
おそらく後ろの方を通っているように思えます。
文字を画像にするのはできれば避けたいです。

お礼日時：2009/12/15 16:11