タイ研修いってきました
2014.04.21

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

  • このエントリーをはてなブックマークに追加
opacityのマウスオンで画像が1pxズレるバグの解決方法

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

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

 

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

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

 

既存ソースを適応

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

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

すごく、困りました。

 

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

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

 

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

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

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

 

 

IE8での解決方法

 

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

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

 

 

最終的なソース

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

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

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

 

 

参考情報

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

この記事を書いた人

浅井 脩太郎代表取締役

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

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。