htmlファイル内にて、
a:hover {background-color:#cc0000;}
img {margin:10px;}
と指定しているます。
このとき、画像にアンカーリンクを張っていると、Firefox2.0で画像にマウスポインタを合わせたときに、
margin-bottomの10pxの部分がa:hoverで指定した色に変わってしまいます。
（IE6.0の場合は色は変わりません。）
テキストリンクのみa:hoverを対応させるようにして、画像リンクの場合はすべてa:hoverの設定を回避するようにしたいのですが、どのように記述すれば回避できますでしょうか？
a:hover img {background-color:#ffffff;}
などと指定してもできませんでした。
imgタグにclass属性を加えることなく、回避する方法がありましたらぜひ教えてください。
どうぞよろしくお願いいたします。
No.1
16
1
25pt
31
30
img {margin:10px;}
を
img {padding:10px; background-color:#ffffff;}
にしてみてはどうですか。
margin部分は「a要素の中でありimg要素の外」ということになるので、imgへの指定では多分回避できません。
どうもありがとうございます。
paddingで指定すると、この問題は回避できました。
けれど、今度はIEで表示したときにimgに対するpaddingの指定が反映されないのです。
なので、今度はレイアウトが崩れてしまうのですよね～。
IEで表示したときに、imgタグに対するpaddingが有効にならないのは他の要素もからんでくるのでしょうね・・・。
No.2
37952
25pt
marginの代わりにpaddingを使って、
img {
padding: 10px;
background: #ffffff;
}
としたらどうでしょう？
どうもありがとうございます。
上記のコメントの通り、新しい問題が発生してしまうので、それを回避できるように頭を使ってみます！
No.3
1348
ここでベストアンサー
50pt
img {
padding:10px;
background:#fff;
margin:0;
_margin:10px;
}
ではいかがでしょうか。
どうもありがとうございます。
IEでもFirefoxでも望み通りの表示をすることができました！
_margin とうい記述方法があるのですね～！
IEだけに読み込ませる方法なのでしょうか・・・。
昨日1日中悩んでいたことが解決しました。
本当にありがとうございました(^^)
No.4
46069
25pt
コメントがつけられないので、こちらへ。
つい最近、似たような質問がありました。
http://q.hatena.ne.jp/1189597197
こちらの質問者さんは、ボックスサイズを指定する事で回避したようですが。
で、同じ回答になってしまいますが、
img { border-style: none; background-color: Window;}
これではどうでしょう。
上記では背景の色をウィンドウと同じとしましたが、色の指定は色々出来るようです。
http://www.tohoho-web.com/wwwcolor.htm#ColorUserDefine
状況によっては、別の色指定（あるいはその親要素が指定しているのと同じ色）が必要かも知れません。
IE(互換モード)はボックスサイズの計算が規格に合っていないので、padding を使うと他のブラウザと表示が異なります。
標準モードとなる様にチャンと宣言するか、使わないのがよいでしょう。
どうもありがとうございます。
同じような質問を教えていただいてありがとうございます。
いろいろな指定方法があるのですね～！
改めて勉強してみます(^^)
wen000
2007/09/25 16:21:59
pitagora
どうもありがとうございます。
IEでもFirefoxでも望み通りの表示をすることができました！
_margin とうい記述方法があるのですね～！
IEだけに読み込ませる方法なのでしょうか・・・。
昨日1日中悩んでいたことが解決しました。
本当にありがとうございました(^^)