• ie6,ie7下a标签无法点击(转载)


     前几天在做一个网站的引导页面,因为都是用图片,所以按钮需要用空a标签来做,发现a标签在IE6与IE7中点击无效中点击不了,其他浏览器都正常。一开始以为是z-index的问题,但不论z-index设置多大依然还是无效。代码大致如下:

    <a style="position:absolute; top:0; left:0; display:block; 100px; height:50px;" href="#"></a> 

            给a标签添加文字后,发现只有鼠标放到文字上会成手型(说明能点击),而放到文字外面却不是手型,无论a标签的宽高有多大都不行。于是随意给a标签添加了一个background意外的发现鼠标在非文字区域(但在a标签里面)也能成手型,然后尝试将文字去掉依然可以成手型,于是也就找到了问题之所在了。

    最后得出了结论:

            如果给空a标签定义了宽度和高度且使用了absolute,则在IE6和IE7中点击无效。

    也找到了两种解决方法(主要是针对a标签不能设置背景情况):

            1、给a标签添加样式:background:url(about:blank);

            2、给a标签随便添加背景色或者背景图片,然后将a标签的透明度设置为0,不过在IE中需要使用滤镜,即 opacity:0;filter:alpha(opacity=0);

    扩展:

      在做一个hover下的半透明遮罩层时候遇到的,结构大致如下:

    复制代码
    <ul class="clearfix_after">
                <li class="hover">
                  <div class="hover_box">
                     <p>文字文字文字文字文字</p>
                  </div>
                  <a class="pic" href="" title="">
                     <img src="img/pic_17.jpg" width="149" height="192" alt="" />
                  </a>
               </li>
    </ul>
    复制代码
    复制代码
    li{
        149px;
        height:192px;
        position:relative;
        float:left;
        margin-right:7px;
    }
    .hover_box{
        display:none;
        position:absolute;
        z-index:2;
        149px;
        height:192px;
        top:0;
        left:0;
        filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000', endColorstr='#99000000');
        background:rgba(0,0,0,0.6);
        color:#FFF;
        /*background-image:url(about:blank);*/
    }
    .hover .hover_box{display:block;}
    .pic{display:block;position:relative;z-index:1;}
    .pic img{display:block;}
    复制代码

    在IE6下 hover_box的确是半透明了 但是在hover_box上却可以点击到下一层的a标签(hover_box下的内容则可以挡住,不会点到a标签)

  • 相关阅读:
    ES2017 新特性:Async Functions (异步函数)
    为什么 window.location.search 为空?
    vue-cli 构建Vue项目后的打包和发布
    Vue.js父子组件如何传值 通俗易懂
    vue 面试题(文章末尾还有其他链接)
    vue组件命名和传值 and 父子组件传值
    line-gradient 之渐变角度
    vue-router路由模式
    vue-router 去掉#
    记录vue项目上线遇到的一些问题
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/8782395.html
Copyright © 2020-2023  润新知