【CSS】 IE6 ，7下a連接失效的問題及解決方案

時間 2019-12-06

標籤 CSS ie6 連接失效問題解決方案欄目 CSS 简体版

原文原文鏈接

問題描述：

web應用中，常常須要在圖片上添加相應的連接，並且相對於傳統的文字連接的方式，不只美觀，並且有更大的可點擊區域。例如，京東網圖書頁面的一個簡單佈局：css

<a title="畢業歌" href="http://item.jd.com/11366857.html" target="_blank">html
<img width="130" height="130" src="http://img10.360buyimg.com/N3/g15/M02/1A/01/rBEhWFKefgMIAAAAAAasi2nEFKYAAGSvgNUZjAABqyj646.jpg">web
</a>app

這種狀況是幾乎沒有任何問題的，可是，若是在img標籤以外，a標籤以內再添加一層元素（如div或者p標籤），在IE6，7下雖然可以正常顯示連接，可是卻沒法點擊。即便你給a標籤的樣式加上
cursor:pointer;設置相應的高度和寬度，設置爲display:block，依然是沒法點擊的。以下所示的佈局：佈局

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">測試
<div class="a">spa
<img src="test.jpg"/>.net
</div>code
<div class="b">xml
<img src="test.jpg"/>
</div>
</a>

對應的樣式爲：

.a,.b{
width:140px;
height:140px;
float:left;
margin:10px 0 10px 10px;
display:inline;
}

在IE6 ,7下，右鍵點擊能夠顯示「在新標籤中打開連接」等選項，證實不是a連接無效。並且在兩圖片的margin的空白區域，是能夠點擊的，只有圖片的區域卻沒法點擊（也就是圖片區域的鏈接失效了）
這是因爲，在IE6,7中，因爲觸發了img標籤的父元素的hasLayout屬性，從而使得父元素（這裏是div元素）本身的佈局掩蓋了a標籤的連接。這一點，咱們能夠經過禁用img父元素的樣式來證實：

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
<div>
<img src="test.jpg"/>
</div>
<div>
<img src="test.jpg"/>
</div>
</a>

這種佈局下：圖片的區域是能夠點擊的。

具備hasLayout屬性的標籤（默認haslayout值爲true）：

<html> <body> <table> <tr> <td> <td> <img> <hr> <input> <button> <select> <textarea> <fieldset> <legend><iframe> <embed> <object> <applet> <marquee>

可以觸發hasLayout的css屬性(樣式有)：
display:inline-block;
float:left|right;
width(height):除了auto以外的值。
position:absolute;
zoom:1 顯式開啓hasLayout。
Ie7下觸發hasLayout的樣式屬性還有：
min-width,min-height等。
關於haslayout的更多細節，也能夠參考這篇文章：

http://www.jb51.net/web/77542.html

知道了緣由，針對以上的問題，解決的方案有：

1.去掉img標籤的元div元素，將父元素的樣式遷移到img標籤上，佈局以下：

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
<img class="a" src="test.jpg"/>
<img class="b" src="test.jpg"/>
</a>

2.保留div元素，可是去掉觸發haslayout的width和height屬性(實際上這樣只是保留了空架子)。以下

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
<div>
<img class="a" src="test.jpg"/>
</div>
<div>
<img class="b" src="test.jpg"/>
</div>
</a>

完整的測試代碼以下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<title>關於 hasLayout</title>
<style type="text/css">
html,body,div,p,a,img{
margin:0;
border:0;
}
.wrapper{
width:312px;
text-align:center;
margin:0 auto;
margin-top:100px;
border:1px solid red;
}
.a,.b{
width:140px;
height:140px;
float:left;
margin:10px 0 10px 10px;
display:inline;
}
</style>
</head>
<body>
<div class="wrapper">
<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
<div class="a">
<img src="test.jpg"/>
</div>
<div class="b">
<img src="test.jpg"/>
</div>
</a>
</div>
</body>
</html>

請在IE6,7下測試。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。