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

72 阅读 0 评论 48 点赞

我是靠谱客的博主痴情西装，最近开发中收集的这篇文章主要介绍IE8以下浏览器，包括IE8图片不平铺，平铺后点击事件失效的解决办法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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>