zoukankan      html  css  js  c++  java
  • IE6和IE7中<a>标签宽高设置无效的问题

            昨天写了一个引导界面, 发现界面中的IE67存在一个问题, 在某些情况下,  A锚链接如果设置了宽高,而且position:absolute的情况下, A标签的宽高无效, 至于总体的效果, 因为这个A标签受到父级的影响, 单独写DEMO的话,这个bug一直无法复现出来, 不知道是什么原因:

      实际上出现的问题如下图,其中两个A标签宽度是整个页面的50%, 两个A标签都有position:absolute, width:50%;height:100%;  只有A标签有background的情况下, 这个A标签的宽高才生效, 否则你怎么弄, 这个标签width和高都为0, 仿佛不存在界面中:

          

      因为元素的文档流是定位, 没有别的元素影响到A标签,  旁边也没有浮动的元素, 所以排除float元素和position元素并排一起出现的bug , 参考: position:absolute在IE6中不显示 

      写了一个大概的DEMO,无法复现这个问题, IE7的心我猜不了:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body style="ZOOM: 1">
    <style>
        .wraper{
            position: absolute;
            left:100px;
            top:10px;
        }
        .wraper a {
            position: absolute;
            top: 0;
            left: 0;
             100px;
            height:100px;
            z-index:9999;
            cursor: pointer;
        }
    
        .wraper .bg {
            background: #f00;
            top: 200px;
            left: 0;
        }
        
    </style>
    <div>
        <div class="wraper">
            <a  href="#">
                链接
            </a>
            <a  href="#" class="bg">
                链接
            </a>
        </div>
    </div>
    </body>
    </html>
    View Code

    最后得出了结论:

      在某些情况下,如果A标签定义了宽度和高度且使用了absolute,则在IE6和IE7中点击无效。

    也找到了两种解决方法:

      1、给a标签添加样式:

    background:url(about:blank);

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

    opacity:0;filter:alpha(opacity=0);

    写在最后面:

      我把A标签换成了DIV标签, 同样存在这个问题, 解决方法同上;

  • 相关阅读:
    鼠标移开事件(onmouseout)
    IOS iPhone 屏幕尺寸 判断设备屏幕尺寸、分辨率
    iOS 程序图标Logo设置
    关闭iOS虚拟键盘的几种方法
    Xcode5.1离线下载安装及使用iOS5模拟器进行开发调试的方法
    按钮创建
    Mac 截图 快捷键
    UserDefaultes 数据存储使用
    NSUserDefaults 使用方法
    IOS中NSUserDefaults的用法(轻量级本地数据存储)
  • 原文地址:https://www.cnblogs.com/diligenceday/p/4778333.html
Copyright © 2011-2022 走看看