画像のマウスオーバーをクロスフェードさせたときにchromeのみレスポンシブがおかしくなるため対処を教えてください

Question

レスポンシブでサイトを制作しています。

マウスオーバーで画像が切り替わるように、
画像名に「XXX_on.jpg」「XXX_off.jpg」をつけて(XXXは同じ名前）、
「XXX_off.jpg」にマウスオーバーすると、「XXX_on.jpg」が表示されるようにしています。

レスポンシブでサイズが変更になった際、
IEやFirefoxでは、マウスオーバーしても問題なく、hoverの画像もそのサイズになるのですが、
google　Chromeはマウスオーバーしても、もともとの「XXX_on.jpg」画像の大きさのままなため、
マウスオーパーしたときにおかしくなります。
（画面幅900px以下でご確認ください）

googleChrome他サイトでも、レスポンシブで、問題なく切り替わるようにするには
どうしたらよいでしょうか？

どうか教えてください！よろしくお願いいたします！！

■　内容確認用サイト
http://u-space-kd.com/souzoku/test.html

■　画像切り替えのjQueryの記載（</body>の直前）

<script> // 画像のプリロード $(function(){ $('a img').each(function(){ var img = $(this); var src_off = img.attr('src'); var src_on = src_off.replace(/^(.+)_off(.[^.]+)$/, '$1_on$2'); $('<img />').attr('src', src_on); img.hover(function(){ img.attr('src', src_on); },function(){ img.attr('src', src_off); }); }); }); </script>

Answer 1

該当のimgの親要素であるa要素にCSSでposition: relative;を追加してください。
position: absolute;を使うときは、必ずposition: static;以外の値とセットです。
親要素に指定がない場合、画面の左上を基準とした絶対位置になるのでwidthの制御が効かなくなっています

ちなみに、提示のコードと、実際のサイトではjQueryの挙動が違うようなのですが問題ないですか？
提示コードではimgのsrcをattrで書き換える処理ですが
実際のサイトではopacityを操作して表示されています

Comments

[monchiyuki]

早速教えていただきありがとうございます！
a要素のposition: relative;が抜けていました‥‥
jQuery の挙動も追って修正しますが、とりあえず解決のお礼まで！！！
本当にありがとうございました！！！！感謝！！