>opacityを適用した時にオンマウスで画像が1px動いてしまったりするバグの解決法2013年3月27日opacityを適用した時にオンマウスで画像が1px動いてしまったりするバグの解決法FacebookTwitterhatenaLINE今回は透明度を指定するためのプロパティ「opacity」で発生したバグの解決法を書いていきます。「.opacity」というクラスに、opacityの指定を行ないます。/*Opera・Safari*/}そしてこの「.opacity」を画像に適用します。class="opacity">これでオンマウスすると画像が透明になるのですが、Firefoxのみ、オンマウス時に画像が1px動いたり、ひどい時は画像が無くなるような時も。これは背景指定が原因のようで、backgroundの指定を追記する事で解決できます。#fff;これでFirefoxの問題が解決出来たかと思いきや、backgroundを指定したままだとIE8でバグが発生。そこで今度は下記指定を追記することで、IE8のエラーが無くなりました。1;これで大丈夫かと思いきや、もう一度Firefoxで確認してみると、またバグが発生してしまいました。ストレートな記述だけでは解決出来そうになかったため、この時ばかりはハックに頼り、最終的には下記のような書き方で全ブラウザの表示を統一する事ができました。#fff;}【参考】この現象はいつも起こるわけではないのですが、困ったことに大抵、サイトを作り終える頃に発生します。opacityでバグや変な動作が発生してしまった場合は、取りあえずこれらを試してみましょう。画像の下に数ピクセルの謎の余白が出来てしまう時に解決できるCSSサイトに画像を表示するならimgタグ、divなどで囲ってレイアウトを調整、よくある日常の作業なのですが、たまに悩まされる時があります。今や当然のように記述するようになったHTML5で追加されたタグ。<header>や<footer>、<nav>など、これまで...便利なcalc()関数でwidthやfont-sizeの値を計算式で指定レイアウトを組む時、特に横幅可変やレスポンシブ対応の際に横幅や余白の計算は不可欠ですね。横幅いっぱいに伸ばしたいけど50pxだけ余白を残したい時。偶数や奇数ごと、3つごとや5つごと、といった指定や、n番目のみ、という指定。CSSを指定した要素にだけ適用したい場面はよくありますが、そんな時に便利な疑似クラス...スマホ用サイト、縦向きと横向きでCSSの指定を切り替える記述方法2014年現在、あるのが当たり前になりつつあるスマートフォン用サイト。コメントをキャンセルメールアドレスが公開されることはありません。