IE8以下浏览器，包括IE8图片不平铺，平铺后点击事件失效的解决办法

IE8图片平铺及点击事件问题解决

最新推荐文章于 2025-07-27 09:36:35 发布

原创最新推荐文章于 2025-07-27 09:36:35 发布 · 798 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#IE8 #IE图片不平铺 #IE点击事件失效 #滤镜使用 #jquery

前端学习同时被 2 个专栏收录

13 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

IE8，JSP界面图片不平铺的话，可以设置滤镜，包括背景图片，透明度都可以使用滤镜，这样就可以平铺了

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    .bodyBgColor{
        background-position:50%;
        background-size:cover;
        background-repeat: no-repeat;
        background-image:url(/pcQuery/img/5.jpg);
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='/pcQuery/img/5.jpg',
        sizingMethod='scale');
        -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='/pcQuery/img/5.jpg',
        sizingMethod='scale');
    }
</style>
</head>
<body class="bodyBgColor">
    <span onclick="spanICclick()">
		   读取IC卡
    </span>
</body>
</html>

如果平铺后，发现body里面的所有点击事件失效,比如我这里用了滤镜后，body里面span的点击事件就失效，不管你用哪种写法都绑定不上，这时候，我们想让这个body里面的点击事件生效，则在该span外面套一层a标签，然后给a标签加上相对定位就可以了，需要注意的是，这个时候我们就需要给点击事件绑定在a标签上面

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    .bodyBgColor{
        background-position:50%;
        background-size:cover;
        background-repeat: no-repeat;
        background-image:url(/pcQuery/img/5.jpg);
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='/pcQuery/img/5.jpg',
        sizingMethod='scale');
        -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='/pcQuery/img/5.jpg',
        sizingMethod='scale');
    }
</style>
</head>
<body class="bodyBgColor">
  <a id="spanICclick" style="position:relative;">
    <span>
		   读取IC卡
    </span>
  </a>
</body>
<script>
  //读取IC卡
  $("#spanICclick").click(function(){
	  alert("我已经触发啦！");
  })
</script>
</html>