IE6 mouseoverするとボタンの背景が消えるエラー解決策


問題

ここにmouseoverするとopacity 0.75がかかるボタンがあります。(jsでopacity指定)
IE6で見たとき、mouseoverするとボタンが消えてしまう現象をどうにかしてほしい。

    width: 150px;
    height: 37px;
    border: none;
    background-image: url("/common/○○/img/○○.png");
    background-repeat: no-repeat;
    background-position: 0 -50px;
    cursor: pointer;
    *border-width: 0;

解決策

IEではopacityが使えない。filterを使います。
ただ、今回はopacity指定はjsでやっていて、js触るの禁止で、
cssで直すしか道がない場合の解決策です。
mouseoverすると消えてみえるのは、opacityが0になっていると思われるので、
opacityを100%にします。

*filter: alpha(opacity=100) !important;      /* ie 6 7 */

だが、それだけだとmouseoverでボタンは消えたままでした。
hasLayoutをtrueにする必要があり、*zoom:1を足しました。

    width: 150px;
    height: 37px;
    border: none;
    background-image: url("/common/○○/img/○○.png");
    background-repeat: no-repeat;
    background-position: 0 -50px;
    cursor: pointer;
    *border-width: 0;
    *zoom: 1;
    *filter: alpha(opacity=100) !important;

これで消える現象はなくなりました。

参考:

Internet Explorer でフォームボタンの背景画像が表示されない
http://www.ilovex.co.jp/blog/system/webconsulting/internet-explorer.html

CSSで半透明にできるOpacityプロパティとIEでの問題について
http://blog1.erp2py.com/2011/04/cssopacityie.html