2014.04.21

HTML/CSS

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

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

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

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

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

既存ソースを適応

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

a:hover img {

opacity: 0.6; /*Opera・Safari*/

filter: alpha(opacity=60); /*IE*/

-moz-opacity:0.60; /*Firefox*/

}

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

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

すごく、困りました。

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

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

    background: #背景色カラー;

1	background: #背景色カラー;

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

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

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

IE8での解決方法

    display: inline-block;
    zoom: 1;

1 2	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: #背景色カラー;}

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: #背景色カラー;}

参考情報

http://labo.520328.jp/css/opacity_bug/

HTML/CSS

Facebookの#（ハッシュタグ）の使い方と効果

プレゼンで必要なスキルを学ぼう～鉄の掟5選～

この記事を書いた人

浅井脩太郎代表取締役

バスケット、フットサル、ゴルフ、スノボに将棋やチェス。多趣味のため、常にお金がない。学生時代、地層に興味を持ち『土木』を学ぶ。社会人では、苦手分野である『IT』の世界へ。良き上司、良き先輩、良き同期、良き後輩に恵まれ、楽しい時間を過ごす。コンサルティング業務、システム開発では上流工程から下流工程のすべての業務に従事。 2013年、株式会社レジット創業。