css使用filter后，js的折叠菜单就无效了！

adown 2008-10-04 10:51:05

这是html文件



<html>

<head>

<title>test</title>

</head>



<style type="text/css">

#div_tb_left {

	width: 207px; 

	height: 581px;

	margin-left: auto;

	margin-right: auto;

	background-image:url(img/leftBaner.png)!important;background-image:none;

	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="img/leftBaner.png");

}

.divmenu {

	text-align:left;

	font-family:"Comic Sans MS";

	color: #F7931D;

	font-size:18px;

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

}

.div1 {

	text-align:center;

	font-family:"Comic Sans MS";

	color: #F7931D;

	font-size:18px;

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

}

.div2 {

	text-align:center;

	font-family:"Comic Sans MS";

	color: #F7931D;

	font-size:12px;

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

}

</style>



<script type="text/javascript">

/*折叠菜单函数*/

/*做计数器*/

var count=0;

/*用于记录当前显示的哪几个菜单*/

var limit=new Array();

/*同时打开菜单数目，可自定义*/

var countlimit=1;

function expandIt(el) {

	obj = document.getElementById("child" + el);

	if (obj.style.display == "none") {

		/*显示子菜单*/

		obj.style.display = "block";

		/*限制1个*/

		if (count<countlimit) {

		/*录入数组*/

		limit[count]=el;

		count++;

		}

		else {

		document.getElementById("child" + limit[0]).style.display = "none";

		/*数组去掉头一位，后面的往前挪一位*/

		for (i=0;i<limit.length-1;i++) {limit[i]=limit[i+1];}

		limit[limit.length-1]=el;

		}

	}

	else {

	obj.style.display = "none";

	var j;

	/*获取当前点击的菜单在limit数组中的位置*/

	for (i=0;i<limit.length;i++) {if (limit[i]==el) j=i;}

	/*j以后的数组全部往前挪一位*/

	for (i=j;i<limit.length-1;i++) {limit[i]=limit[i+1];}

	/*删除数组最后一位*/

	limit[limit.length-1]=null;

	count--;

	}

}

</script>

<body>

<div id="div_tb_left">

		<table border="0" cellpadding="0" cellspacing="0" id="tb_left">

          <tr>

            <td height="48" valign="middle" align="center">

				<font style="font-weight:bold; font-size:25px; font-family:'Comic Sans MS'; color:#FFFFFF">

					Products

				</font>

            </td>

          </tr>

          <tr>

            <td height="501" valign="top">

			<div class="divmenu" id="main1" onclick="javascript:expandIt(1);" style="cursor:pointer;">  <img src="img/left_flower.gif" /> Princess Vella</div>

				<div class="div2" id="child1" style="display:none; cursor:pointer;"> 

					<a href="#">Home Accessories</a> <br> 

					<a href="#">Bedding</a> <br> 

					<a href="#">Stationery</a> <br> 

					<a href="#">Shoe/Hair</a> <br>

					<a href="#">Vella's Box</a> <br> 

					<a href="#">Storage & Bag</a> <br> 

					<a href="#">CrownFlower</a> <br> 

					<a href="#">Set3 series</a>

				</div>

			<div class="divmenu" id="main2" onclick="javascript:expandIt(2);" style="cursor:pointer;">  <img src="img/left_flower.gif" /> Color Jungle</div>

				<div class="div2" id="child2" style="display:none; cursor:pointer;"> 

					<a href="#">Wall Deco</a> <br> 

					<a href="#">Organizer</a> <br> 

					<a href="#">Bedding</a> <br>

					<a href="#">Cushion & Slipper</a> <br>

					<a href="#">Wooden Item</a>

				</div> 

			<div class="divmenu" id="main3" onclick="javascript:expandIt(3);" style="cursor:pointer;">  <img src="img/left_flower.gif" /> Bling Bling</div>

				<div class="div2" id="child3" style="display:none; cursor:pointer;"> 

					<a href="#">Wall Deco</a> <br> 

					<a href="#">Organizer</a> <br> 

					<a href="#">Bedding</a> <br>

					<a href="#">Cushion & Slipper</a> <br>

					<a href="#">Wooden Item</a>

				</div> 

			</td>

          </tr>

		  <tr>

		  	<td height="1"></td>

		  </tr>

        </table>

</div>

</body>

</html>

我发现只要在css里面使用了filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="img/leftBaner.png");
这句话，折叠菜单在IE6环境就失效！如果图片不加载不注释代码，也还有效！
希望大家指点下！

...全文