浪費4個多小時修正因使用透明PNG而帶來的問題

 

還是因為《show一下剛做的系統登入介面》，登入框有多個不同等級的alpha值，四周的外邊框透明度為31%，登入框透明度為90%，文字框透明度為75%，產生HTML頁面時，分別用了3個<span>並設定相應的alpha值，簡化後如：

 

<style type="text/css">

.lgfrmbg { position:absolute; top:50%; left:50%; margin:-148px 0 0 -208px; width:417px; height:297px;}

.lgfrm { position:absolute; top:50%; left:50%; margin:-142px 0 0 -202px; width:404px; height:285px;}

.frm {position: relative; top:64px; left:40px; font:12px 宋體; color:#dee4d6;}

.frm input {margin:4px 0 0 4px; border: 1px solid #14277a;filter:alpha(opacity=75);-moz-opacity:0.75;opacity: 0.75;}

</style>

 

<span class="lgfrmbg"><!--外邊框--></span>

<span class="lgfrm"><!--登入框--><span class="frm"><!--文字框--><input type="text" id="edtAccount" /></span></span>

 

很簡單。為了讓介面變得好看，使用了PNG使用<span>的底圖，同時為瞭解決Ie6對透明PNG的bug和跨瀏覽器，使用CSS Hack，樣式表變成了：

 

.lgfrmbg { position:absolute; top:50%; left:50%; margin:-148px 0 0 -208px; width:417px; height:297px;}
html>body .lgfrmbg {background-image: url(/images/lgfrmbg.png);}
*html .lgfrmbg {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/images/lgfrmbg.png") progid:DXImageTransform.Microsoft.Alpha(opacity=31);}

............

 

通過瀏覽器查看效果，介面在IE6和IE7下顯示得很好，三個<span>的位置合并得天衣無縫。唯一的問題無論滑鼠怎麼點就是點不中文字框。原本以為是因為“position:absolute; top:50%; left:50%; margin:-148px 0 0 -208px”這種方式導致瀏覽器不能正確計算文字框位置造成，於是花了4個小時來修改這種定位方法，試遍了能想到和找到方法，均沒有滿意的效果。

最後才想起了有人提過那個CSS Hack會導致元素內部連結無法點擊。一測試果真是它造成的，解決方案很簡單（不是網上推薦使用display:inline代替float），把文字框的<span>獨立出來再稍為修改CSS代碼即可，而且這樣做更符合W3C標準。

修改後代碼如下：
<style type="text/css">

.lgfrmbg { position:absolute; top:50%; left:50%; margin:-148px 0 0 -208px; width:417px; height:297px;}
html>body .lgfrmbg {background-image: url(/images/lgfrmbg.png);}
*html .lgfrmbg {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/images/lgfrmbg.png") progid:DXImageTransform.Microsoft.Alpha(opacity=31);}
.lgfrm { position:absolute; top:50%; left:50%; margin:-142px 0 0 -202px; width:404px; height:285px;}
...............
.frm {position: absolute; top:50%; left:50%; margin:-78px 0 0 -162px; font:12px 宋體; color:#dee4d6;}
.frm input {margin:5px 0 0 5px; border: 1px solid #14277a;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity: 0.75;
}

</style>

 

<span class="lgfrmbg"></span>
<span class="lgfrm"></span>
<span class="frm"><input type="text" id="edtAccount" /></span>

 

白白浪費了4小時，冤枉啊！！