IE上关于PNG做背景,层上超链接不能点击的解决办法

CSS代码:

引用

<style type="text/css">
.pngbg{background:url(menubarbg.png) no-repeat;}
.pnglink{height:145px;232px;}
#area{left:20px;top:20px;position:relative}
</style>
<!--[if lt IE 7]><style>
.pngfixed {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='menubarbg.png', sizingMethod='crop'); 
}
.pngbg {background-image: none;}
</style><![endif]-->

Html代码:

引用

<div class="pngbg pnglink">
<div class="pnglink pngfixed">
<div id="area">
<a href="http://www.enterdesk.com">Fixed PNG-A-HREF-Cann't Click</a>
</div>
</div>
</div>

几个注意的地方,这个是解决IE下出现的问题,FF没问题
1.ID=area的DIV,是放置PNG背景层上的内容,此DIV需有position属性,absolute 或者relative都行,position有继承关系,所以最好前面的DIV也设置position,这样定位方便.
2.背景的高度定义在.pnglink这个class里面,不可定义在pngbg的class里面

能点和不能点的演示地址:http://www.dodo.hk/play/png.html

 ///我使用后的心得

不需要这么复杂，问题在于PNG层的CSS不要设置为Position:Relative;可以在中间加一个Relative层，在这个层里面加上内容,其上的事件都可以响应。

 CSS代码：

.Relative

{

position:relative;

} 

div#News

{

365px;height:188px;background:url('/Images/beijing.png') no-repeat;float:left;

}

* html div#News { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/Images/beijing.png");background-image: none; }

div#News div#More

{

39px;height:13px;position:absolute;top:160px;right:10px;background:url('/Images/more.gif') no-repeat;

}

div#News div#NewsItems

{

340px;height:110px;position:absolute;top:45px;left:15px;

}

HTML代码： 

         <div id="News">

            <div class="Relative">

                <div id="NewsItems">

                    ...

                </div>

                <div id="More"></div>

            </div>                

        </div>