2008/12/23 火曜日

AlphaImageLoaderでクリックや入力が利かなくなる件

Filed under: IE, css — admin @ 16:11:10

IE6以下でcssで透過PNGを使用する際にAlphaImageLoaderを使用するがAlphaImageLoaderは背景というよりも最前面にイメージをロードする仕様なのでリンクの上や入力フォームの上のレイヤーに置かれてしまい、formのinputタグやaタグを使うと不具合が生じる。対処方法は、aタグやinputタグの外側にspanタグなどで囲みそこでbackground及び、AlphaImageLoaderを設定する。その後中のAタグやINPUTタグの部分で position:alternativeを指定し、強制的にAlphaImageLoaderの上に表示させるようにする。

/* search form */
#searchform {
        position: absolute;
        top: 0px;
        right: 0px;
        background: url(/_img/searchform-bg.png) no-repeat right bottom;
        _background:none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/_img/searchform-bg.png);
        height: 60px;
        width: 259px;
}
#searchform #s{
        position: relative;        background: #ffffff url(/_img/form-field-bg.gif) no-repeat ;
        height: 17px;
        width: 148px;
        margin: 6px 5px 0px 35px;
        padding: 3px 7px 2px 5px;
        color: #999999;
        border: none;
}
#searchform #searchsubmit {
        background: url(/_img/search-btn.png) no-repeat left top;
        _background:none;
        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/_img/search-btn.png);
        height: 24px;
        width: 24px;
        border: none;
        text-indent: -999%;
        line-height: 1px;
        margin-top: 6px;
}

このサイトの検索窓がそんな感じになってました。

No Tags

コメント (71) »

この記事にはまだコメントがついていません。

コメント RSS トラックバック URL

コメントをどうぞ

You must be logged in to post a comment.