- ベストアンサー
borderでa:hover下線表示させるとズレる
underline では雰囲気に合わないため、border-bottomでホバー時のリンク下線を表示させています。具体的には以下のような感じです。 a {color: 青; text-decoration: none;} a:hover {color: 赤; text-decoration: none; border-bottom: dotted 1px 赤;} これでほとんど問題ないのですが、まれにホバー時にガタッと表示がズレることがあります。よく分からないのですが、ちいさなdiv要素を連続させている部分で起こるような気がします。リンクにマウスオーバーすると、続くdiv部分が下線分？下に動く感じです。 説明がうまくできているか分かりませんが、解決策があったら教えてください。ちいさなことですが、結構気になってしまいます。
- bubupiglet
- お礼率100% (9/9)
- HTML
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
> ちいさなdiv要素を連続させている部分で起こるような気がします。 これかな？ アンカーを:hover状態にすると親ブロックの高さが変化する(5.5/6.0) - Internet Explorer (Windows) CSSバグリスト http://web.archive.org/web/20071216222842/cssbug.at.infoseek.co.jp/detail/winie/b102.html # 以下、余談 IE8でborderの実験をして、borderの上下が消えるバグらしき現象を発見しました。 ------- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> <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> ------- 調べてみても同じ現象報告は見つからず。 本件とは無関係だとは思いますが、何かの折りに発現しそうなので念のため書いておきます。
その他の回答 (2)
- salonpath
- ベストアンサー率48% (194/399)
>>think49さん あ、ほんとだIE8だと上下出ませんね。。。 ちなみにline-height:1.3;以上つけると表示しました bodyにline-htightしてる人は気づかないかもしれませんね。 でコメントだけになってしまうので 別のリンク下線表示の方法を書きます。 a:hover{ background:url(お好みのアンダーバーの画像) repeat-x left bottom; }
お礼
2度目のアドバイスをありがとうございます。 このバックグラウンドの方法でも、同じズレ現象が生じました（TT） いろいろやっていて、 １）小さな<div>の連続する箇所…で、 ２）リンク文が長く、折り返しが発生するとき のみこのズレ現象が生じることが分かったので、頑張ってリンク文を短くすることで対応できました。 お時間をさいてお返事くださってありがとうございました。
- salonpath
- ベストアンサー率48% (194/399)
hoverで下に1px伸びるから要素がズレるんだと思います。 aに border-bottom: dotted 1px 背景色; を追加するとどうでしょう
お礼
アドバイスありがとうございます。 助言のとおりに a に追加してみましたが、まだ同じ現象がおこります（TT）
お礼
関連事項までどうもありがとうございました。 Internet Explorer (Windows) CSSバグリストを読んでみましたが、わたしには上級すぎて難しく、もうひとつ<div>を挿入すればいいのかな？と思いつつも、バグ回避のために余分な要素を追加するのもどこか違和感があり、行動に移せませんでした^^； でもでもご親切にアドバイスをどうもありがとうございました。 こんなこともあるんだな…と勉強になりました。 ちなみにいろいろやっていて、 １）小さな<div>の連続する箇所…で、 ２）リンク文が長く、折り返しが発生するとき のみこのズレ現象が生じることが分かったので、頑張ってリンク文を短くすることで対応できました。 お時間をさいてお返事くださって感謝です。