IE8 フォーカス＆クリック時の点線について

解決済

質問者：moon333
質問日時：2009/07/07 16:12
回答数：2件

IE8の動作で困っております。

Pタグ内の画像にリンクを貼り,
その画像をクリックした時のクリックの点線が、
IE8のみ画像の下側の点線が表示されません。

Pタグをとると、下側にも点線が表示されるのですが、
仕様上、Pタグは必要となります。
またIE6、IE7、FF3.5は、Pタグの有無に関係なく下側のリンク点線は正常に表示されます。

▼HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>test</title>
</head>

<body>
<p><a href="test.html"><img src="http://www.geocities.jp/ajax3210/test.gif" border="0" /></a></p>
</body>
</html>

※環境は、WindowsXP SP3です。

解決方法をご存じの方ご教示くださいませ。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： salonpath
回答日時：2009/07/07 17:35

毎度おなじみインターネットエクスプロラーって感じですけど

なんだこれ、気持ち悪いなぁ

ちょっと試してみてとりあえず3つ、IE8しか確認してません。

aにdisplay:inline-table;かdisplay:inline-block;（隙間消える）
それかimgにvertical-align:top;（画像の下に隙間がある）

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうござます。
毎度ですが、IEにはいつも悩まされますね。

早速ご回答の3つを試してみました。
3つとも問題なくクリックの点線は表示されました！
3つ目は画像の下に余白ができるので今回は見送りですが…。

ご回答をヒントに色々と試したら、
imgに vertical-align:text-bottom; でもクリック点線は表示されました。

通報する

お礼日時：2009/07/07 18:46

No.2ベストアンサー

回答者： think49
回答日時：2009/07/07 17:36

どういう理屈かわかりませんが、DTDを「XHTML 1.0 Strict」に変更したら解消されました。

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html lang='ja' xml:lang='ja' xmlns='http://www.w3.org/1999/xhtml'>

不思議ですね…。

- 0
- 件

通報する

この回答へのお礼

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

ご回答のとおり「XHTML 1.0 Strict」にすれば解消されますね。
そのままだと画像下に余白ができるので、
img に vertical-align:text-bottom; で余白がとれました。
　
いつもはDreamweaverでTransitionalのマークアップをしているので、
Strictの勉強も必要ですかね。。

その他、解決方法をご存じの方はご教示くださいませ。

通報する

お礼日時：2009/07/07 18:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！