css - IE下a链接的问题
本文介绍了css - IE下a链接的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrapper{
position: relative;
width: 500px;
height: 500px;
border: 1px solid #000;
}
a{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
/* background: red; */
}
</style>
</head>
<body>
<div class="wrapper">
<img src="https://www.baidu.com/img/bd_logo1.png">
<a href="http://www.baidu.com"></a>
</div>
</body>
</html>这个时候,我在IE10及以下 都不能点击链接,鼠标为三角型,但是当我把注释的那行css背景加上的时候,ie10及以下链接就生效了,鼠标变手型了
当我把img注释掉,且把a标签的背景css注释掉,a链接仍然可以点击
解决方案
IE bug
正方形为<a>，长方形为<img>。如果上层元素没有内容（边框，背景，文字，图片），则重叠部分会有穿透现象。类似于给a的重叠部分设置了pointer-events: none;
想了一下，如你所说，可以使用设置背景配合滤镜来解决。
filter: alpha(opacity=2);的效果图
这篇关于css - IE下a链接的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
