zoukankan      html  css  js  c++  java
  • IE7中a标签包含img,点击img,链接失效的bug

    在做列表时,我们经常会这样写:

    <ul class="works-list">
         <li>
             <a href="">
                <div class="photo"><img src="./img/works-1.png"></div>
                <p class="works-name">不安的种子</p>               
             </a>               
          </li>
          <li>
             <a href="">
                <div class="photo"><img src="./img/works-1.png"></div>
                <p class="works-name">不安的种子</p>               
             </a>               
          </li>
      </ul>

    在现代浏览器下点击图片或者a标签里的其他部分,均能链接到指定url,但是在ie6,ie7,部分ie8下鼠标hover到img上并没有出现鼠标的手,而且点击也没有反应。

    解决方法:

       推测是css样式问题,在img的父元素div上,我设置的css有:

     overflow: hidden; zoom:1;width:200px; height:200px;  

    经查阅资料,img的父div上如果设置width和height,就会导致这种情况,去掉宽高,仍然无效,再将 overflow: hidden; zoom:1; 去掉,就可以了。由此看来,父div上不能设置任何样式。 如果其他浏览器需要 overflow: hidden; 可以添加  *overflow:visible; ,为ie低版本设置hack。

    本文参考http://www.qttc.net/201210227.html

  • 相关阅读:
    弹框定位
    多窗口切换
    frame嵌套页面元素的定位
    元素的等待
    键盘的操作
    鼠标的操作
    下拉列表框的选定定位
    Css定位元素
    依赖反射练习实例
    excel筛选两列值是否相同,如果相同返回第三列值
  • 原文地址:https://www.cnblogs.com/sapho/p/5689192.html
Copyright © 2011-2022 走看看