DIV背景图片随DIV高度宽度变化而自动拉伸

由于是png透明图,并且使用AlphaImageLoader可以实现图片的缩放,所以采用AlphaImageLoader;代码如下:

以下代码中,使用了AlphaImageLoader后,css中的cursor,超级链接,onclick事件等都失效了;;;
<script language=javascript>
function tests(){
alert(event.srcElement.outerHTML);
}
document.body.attachEvent("onclick",tests);
</script>

<style type="text/css">
#idDiv{left:140px; height:400;
width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/back/db-0.png',sizingMethod='scale');
background-image:none;
}
</style>
<div id='idDiv'>
<table>
<tr>
<td style='cursor:hand;color:red'><a href='http://www.sohu.com'>超链接不能用了</a></td>
</tr>
<tr>
<td style='cursor:hand;color:red' onclick='alert(11)'>click不能用了</td>
</tr>
</table>
</div>

这个问题郁闷我好久,终于找到了一个解决办法,共享代码,如下:

在<table标记中加入style='position:absolute' 或position:relative 就可以解决该问题

即父标记应用AlphaImageLoader滤镜后再其子元素标记中应用position:relative 或position:absolute

具体代码如下:

<script language=javascript>
function tests(){
alert(event.srcElement.outerHTML);
}
document.body.attachEvent("onclick",tests);
</script>

<style type="text/css">
#idDiv{left:140px; height:400;
width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/back/db-0.png',sizingMethod='scale');
background-image:none;
}
</style>
<div id='idDiv'>
<table style='position:relative'>
<tr>
<td style='cursor:hand;color:red'><a href='http://www.sohu.com'>超链能用了</a></td>
</tr>
<tr>
<td style='cursor:hand;color:red' onclick='alert(11)'>click能用了</td>
</tr>
</table>
</div>