AlphaImageLoaderでクリックや入力が利かなくなる件
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;
}
このサイトの検索窓がそんな感じになってました。
トラックバック URL :
コメント (71)