opacityのマウスオンで画像が1pxズレるバグの解決方法

HTML/CSS

サイト制作最終段階。そう、まさかのテスト中に1pxズレる現象が発生しました。

制作着手時点で気付けば、別の方法やデザインの変更をすれば済む話ですが、サイト制作完了後に起きた現象なので慌てました。

こんにちは。レジット代表の浅井です。

また同じことでハマりそうなので、メモメモ…

既存ソースを適応

    a:hover img {
        opacity: 0.6; /*Opera・Safari*/
        filter: alpha(opacity=60); /*IE*/
        -moz-opacity:0.60; /*Firefox*/
    }

上記CSSを適応すると、画面遷移の際に画像を使用していると、マウスオン時に画像が透明化するという動作になります。

なんと、Firefoxで確認すると1pxズレる!!

すごく、困りました。

背景指定が原因のようです。

さっそく、backgroundの指定を追記します。

    background: #背景色カラー;

なんと、これだとIE8でバグが発生しました。

何かをすると、新しい問題が発生します。

本当にクロスブラウザ設定は大変です。

IE8での解決方法

    display: inline-block;
    zoom: 1;

これで、大丈夫だと信じていたら、またFirefoxで1pxズレます。

クロスブラウザ設定すごく疲れます。

最終的なソース

まったく同じ現象の人がおりました。

ありがとうございます。しっかりと記事にしてくれて！！

以下のソースで全ブラウザの表示を統一する事ができました。感謝です。

    a:hover img {
        opacity: 0.6;
        filter: alpha(opacity=60);
        -moz-opacity:0.60;
        opacity:0.60;
    }

    /* IE8 */
    html>/**/body a:hover img {
        display /***/:inline-block9;
        zoom /***/: 19;
    }

    /* 新旧Firefox */
    a:hover img, x:-moz-any-link { background: #背景色カラー;}
    a:hover img, x:-moz-any-link, x:default { background: #背景色カラー;}