ie重复加载相同背景图片的bug

来源:互联网 发布:淘宝托管公司排名杭州 编辑:程序博客网 时间:2024/05/20 23:35

这是我使用的jquery滑动菜单的代码,在css中加载菜单项目的背景图片及菜单项的小图片,但是在使用时会反复从服务器请求那两个图片,

<script type="text/javascript">
        $(document).ready(
 function () {
     $(".menuTitle").click(function () {
         $(this).next("div").slideToggle("slow")
   .siblings(".menuContent:visible").slideUp("slow");
         $(this).toggleClass("activeTitle");
         $(this).siblings(".activeTitle").removeClass("activeTitle");

     });
 });
</script>

body
 {
  margin:0;background-color:#9ad075;
 }
 .container
 {
  width:100%; text-align:center;
 }
 .menuTitle
 {
  width:148px; height:25px; background-image:url(images/expand.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
 }
 .activeTitle
 {
  width:148px; height:25px; background-image:url(images/fold.gif); margin:0 auto; line-height:25px; font-size:12.7px; font-weight:bold;color:#43860c; cursor:pointer; margin-top:6px;
 }
 .menuContent
 {
  background-color:#fff; margin:0 auto; height:auto; width:148px; text-align:left; display:none;
 }
 li
 {
   background:url(images/arr.gif) no-repeat 20px 6px ; list-style-type:none;padding:0px 0px 0px 38px; font-size:13px; height:26px; line-height:26px;
 }
 li a:hover,a:active
 {
  color:Red;
  font-size:14px;
  font-weight:bold; 
 }
 ul
 {
  margin:0;padding:0;
 }

经过网上反复查找,正确的解决办法是在css代码顶部添加下面的代码就可以了,据说在ie7中这个bug已经修复!

html {
    zoom: expression(function(ele){
 ele.style.zoom = "1";
 document.execCommand("BackgroundImageCache", false, true);
    }(this));
    }

原创粉丝点击