人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

[CSS]ブロック要素にした<a>タグの中に、画像や文章をぶちこみ、その上で全ての領域にリンクを貼りたいです。

http://d.hatena.ne.jp/notjust/20050221

に詳しくまとめました。

本当によろしくお願いします。知りたいです。

●質問者: notjust
●カテゴリ:コンピュータ 趣味・スポーツ
✍キーワード:CSS タグ ブロック リンク 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Kuruma
●80ポイント

http://members.at.infoseek.co.jp/cssbug/detail/winie/b079.html

ずばりWinIEのバグです。

実はa要素のwidth指定はこのバグを回避するためでもあったわけです。

以下、とりあえず逃げるためのソース。

br.clear {

clear: both;

height:0;

}

<p>

<a href=”#” id=”box”>

<span class=”box_title”>中を整形したい</span>

<span class=”box_body”>

<img src=”test.png” width=”100” height=”100” alt=”pict” title=”pict”>

適当な文章ですよ。適当な文章ですよ。適当な文章ですよ。適当な文章ですよ。適当な文章ですよ。適当な文章ですよ。

<br class=”clear”>

</span>

<br class=”clear”>

</a>

</p>

ちょいと下にスペースが空き不格好ですが、自分が思いついたのはこのくらいです。

◎質問者からの返答

おお、できた…。ありがとうございます。

バグ…。それは、どうしようもない。

でも、今Safariではどうしようもないコトになっている。

難しい…。


2 ● upride
●30ポイント

http://google.co.jp/

Google

サンプル1では理想の動きなのに(IEでも)

自分で設置されたサンプル2では動かないって内容ですよね?

私もwinIEですがサンプル1は動いて、

サンプル2は動きませんでしたが

ちょっと直しただけで動くようになりましたよ

id=”box” で指定しているので

一つ目のIDをbox、二つ目をbox2とかにしてみて下さい

IDは一つの画面で一意である必要がありますので。

Nameはかぶってもいいんですが・・

複数のボックスを画面に表示する場合は

ID指定ではない方が良いと思います

◎質問者からの返答

す、すいません。回答ありがとうございます。

サンプル2を、回答にいただいたちゃんとしたソースであるサンプル1の、Widthだけを変更したものに変えました。

サンプル1は理想的な動作なのですが、

1)Width幅が狭い

2)文章量が、画像サイズに比べて多い

というような理由からなのでしょうか、ボックス要素にしてあるタグのWidth幅を広げると問題が起こります。

WinIEで見ると、文章下部にリンクの貼られていないスペースがぽこんと有るはず、です。

その「リンクの隙間」をどうやったら、WinIEで回避できるのかが、ぼくの知りたいことです。

*初めの回答によると、バグらしいのですが…。

それを直すにはどうすればいいか、知りたいのです。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ