浪费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小时，冤枉啊！！