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链接仍然可以点击

css html

阅读 2.6k

3 个回答

陈安柱

✓ 已被采纳

IE bug

正方形为<a>，长方形为<img>。如果上层元素没有内容（边框，背景，文字，图片），则重叠部分会有穿透现象。类似于给a的重叠部分设置了pointer-events: none;

想了一下，如你所说，可以使用设置背景配合滤镜来解决。

filter: alpha(opacity=2);的效果图

kfqweb

8717

发布于
2017-03-03

position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）
绝对定位：ablution 脱离了文档流与浮动模型，独立于其他对象而存在，没有占位。

在 IE 下面其实你的 a标签在这个位置了，