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