borderでa:hover下線表示させるとズレる

解決済

質問者：bubupiglet
質問日時：2009/07/01 21:59
回答数：3件

underline では雰囲気に合わないため、border-bottomでホバー時のリンク下線を表示させています。具体的には以下のような感じです。

a {color: 青;
text-decoration: none;}
a:hover　{color: 赤;
text-decoration: none;
border-bottom: dotted 1px 赤;}

これでほとんど問題ないのですが、まれにホバー時にガタッと表示がズレることがあります。よく分からないのですが、ちいさなdiv要素を連続させている部分で起こるような気がします。リンクにマウスオーバーすると、続くdiv部分が下線分？下に動く感じです。

説明がうまくできているか分かりませんが、解決策があったら教えてください。ちいさなことですが、結構気になってしまいます。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： think49
回答日時：2009/07/02 11:27

> ちいさなdiv要素を連続させている部分で起こるような気がします。

これかな？

アンカーを:hover状態にすると親ブロックの高さが変化する(5.5/6.0) - Internet Explorer (Windows) CSSバグリスト
http://web.archive.org/web/20071216222842/cssbug …

# 以下、余談
IE8でborderの実験をして、borderの上下が消えるバグらしき現象を発見しました。

-------
<!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'>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<meta http-equiv='content-style-type' content='text/css' />
<meta http-equiv='content-script-type' content='text/javascript' />
<meta name='author' content='think' />
<title>border</title>
<style type='text/css'>
#A{
background-color: #efe;
border: solid 1px black;
padding: 0.5em;
}
a {
text-decoration: none;
}
a:hover {
/*color: red; ここを加えると、「IE8でborderの上下が消える現象」を回避できる */
border: dotted 1px red;
}
</style>

</head>
<body>

<div id='A'>
<a href='#'>test</a>
</div>

</body>
</html>
-------

調べてみても同じ現象報告は見つからず。
本件とは無関係だとは思いますが、何かの折りに発現しそうなので念のため書いておきます。

- 0
- 件

通報する

この回答へのお礼

関連事項までどうもありがとうございました。
Internet Explorer (Windows) CSSバグリストを読んでみましたが、わたしには上級すぎて難しく、もうひとつ<div>を挿入すればいいのかな？と思いつつも、バグ回避のために余分な要素を追加するのもどこか違和感があり、行動に移せませんでした^^；

でもでもご親切にアドバイスをどうもありがとうございました。
こんなこともあるんだな…と勉強になりました。

ちなみにいろいろやっていて、
１）小さな<div>の連続する箇所…で、
２）リンク文が長く、折り返しが発生するとき
のみこのズレ現象が生じることが分かったので、頑張ってリンク文を短くすることで対応できました。

お時間をさいてお返事くださって感謝です。

通報する

お礼日時：2009/07/10 21:01

No.3

回答者： salonpath
回答日時：2009/07/02 15:19

>>think49さん

あ、ほんとだIE8だと上下出ませんね。。。

ちなみにline-height:1.3;以上つけると表示しました
bodyにline-htightしてる人は気づかないかもしれませんね。

でコメントだけになってしまうので
別のリンク下線表示の方法を書きます。
a:hover{
background:url(お好みのアンダーバーの画像) repeat-x left bottom;
}

- 0
- 件

通報する

この回答へのお礼

2度目のアドバイスをありがとうございます。
このバックグラウンドの方法でも、同じズレ現象が生じました（TT）

いろいろやっていて、
１）小さな<div>の連続する箇所…で、
２）リンク文が長く、折り返しが発生するとき
のみこのズレ現象が生じることが分かったので、頑張ってリンク文を短くすることで対応できました。

お時間をさいてお返事くださってありがとうございました。

通報する

お礼日時：2009/07/10 20:55