欢迎来到 jackNEss'窝窝
I like simple mind

IE6下A标签内 点击 img无法跳转解决方案

2011年12月06日

IE6下A标签内 点击 img无法跳转解决方案

根据 W3C 标准,行内元素里面只能嵌套行内元素,不应该嵌套块级元素(虽然新的标准里面已经对这不再要求,行内元素也允许嵌套块级元素),嘛,这不是重点,在我们实际开发中虽然我们想尽量避免,尽量按照W3C标准来做事,不过,需求决定一切的前提下,有时候我们是不得不这样做。

下面举一个例子来说明下:

有这么一个需求:点击上方模块区域内的任何地方都可以进行跳转到另外一个页面。

听到这么一个需求,第一时间我们想到的是 用 a 标签把里面的元素模块包裹起来,从而实现需求。想到了方法,然后就动手吧。

html部分代码:

<!-- html document -->
<a href="#" class="left_layout">
	<div class="side">
		<img src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="temp/user_img.jpg" alt=""/><br/>真希波 cosplay
	</div>
	<div class="main">
		<p><strong>茶麻吕 (ちゃまろ)</strong></p>
		<p>被誉为最美丽的真希波COSER。茶麻吕COS 了众多日本动漫人物形象 ,每个动漫形象都深入人心!其中COS EVA(新世界福音战士)中真希波的形象最为成功,被广粉丝和宅男所津津乐道。 </p>
		<p>喜欢茶麻吕的粉丝们称她为:茶茶 茶酱</p>
		<p>粉丝团名称:麦茶 茶粉</p>
		<p>趣味 ニコニコ动画、絵板や絵チャでお絵描き、コス妄想 </p>
	</div>
</a>

css部分代码

/* css document */

/*reset*/
*{ margin:0; padding:0;}
a{ text-decoration:none;}
a img{ border:0;}

.left_layout{
	display:block; 
	color:#474747; 
	font:12px/1.8 Arial,'\5b8b\4f53',sans-serif;  
	width:500px; 
	margin:50px auto; 
	padding:10px; 
	border:1px solid #e1e1e1;
	zoom:1;	
	-moz-box-shadow:0 0 5px #ccc; 
	-webkit-box-shadow:0 0 5px #ccc; 
	box-shadow:0 0 5px #ccc;
	
}
.left_layout:after{ 
	display:block; 
	overflow:hidden; 
	clear:both; 
	content:"."; 
	height:0; 
}
a.left_layout:hover{ color:#e73a87;}

.left_layout .side{ 
	float:left;  
	text-align:center; 
	margin-right:10px !important; 
	margin-right:7px;
}
.left_layout .main{ 
	overflow:hidden; 
	zoom:1;
}

demo 地址:http://www.jackness.org/lab/img-click-unwork/demo01.html

然后,恭喜问题来了,来自 可爱的 IE6。

  • 问题一:鼠标指到文字区域不变为手指状态,而是光标状态,不过点击能跳转
  • 问题二:鼠标指到图片区域不变为手指状态,而是正常指针状态,且点击无反应

鼠标指到文字区域鼠标形状不正确解决方案

因为除了鼠标不正确之外,没什么功能上的影响,所以我们只需要给个 css属性 cursor:pointer 就ok了。

/* css document */
.left_layout{cursor:pointer;}

鼠标指到图片区域鼠标形状且不能点击解决方案

要找到解决方案,必须先从原因找起,从根本上了解这个bug。

触发条件

在IE6下,a 标签和 img 标签之间有任何元素 设置了浮动 (float:left/right),就会触发此bug。例如:

html 代码如下:

<!-- html document -->
<a href="#" class="outset">
	<span class="side"><img src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="xx.jpg" alt=""/></span>
</a>

css 代码如下:

/* css document */
/* reset */
*{ margin:0; padding:0;}
a img{ border:0;}

.outset{ display:block; margin:50px; padding:10px; border:1px solid #e1e1e1; zoom:1;}
.outset:after{ display:block; overflow:hidden; clear:both; content:".";  height:0;}
.outset .side{ float:left;}

demo 地址:http://www.jackness.org/lab/img-click-unwork/demo02.html

解决方案

知道触发条件,那么其中一个解决方案就是 把触发的条件不成立,即:

  • 让 a 标签与 img 标签之间没有任何元素,直接让img设置浮动。
  • 让 a 标签与 img 标签之间的元素不设置浮动。

但是这些解决方案在某种特定条件的状态下是行不通的,例如上面例子中,左边区域还是一个上图下文的排列方式,所以 “直接去掉 a 标签与 img 标签之间没有任何元素,直接让img设置浮动” 是行不通的,而 由于要做到通用性,左右布局的话通常会用到 居左/居右布局,在这种情况下 浮动是必须的,所以 “让 a 标签与 img 标签之间的元素不设置浮动。” 也是不行的。

本文推荐的解决方案

←_← 经过我反复测试,单单改变样式始终没法让 img点击生效(也许是俺技术不够 ╮(╯▽╰)╭),所以这里提供的解决方案需要给 html代码添加额外的标签来进行 bug修复。

html部分:

<!-- html document -->
<a href="#" class="left_layout">
	<!-- 新增标签 -->
	<div class="click_fix"></div>
	<!--/ 新增标签-->
	<div class="side">
		<img src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="temp/user_img.jpg" alt=""/><br/>真希波 cosplay
	</div>
	<div class="main">
		<p><strong>茶麻吕 (ちゃまろ)</strong></p>
		<p>被誉为最美丽的真希波COSER。茶麻吕COS 了众多日本动漫人物形象 ,每个动漫形象都深入人心!其中COS EVA(新世界福音战士)中真希波的形象最为成功,被广粉丝和宅男所津津乐道。 </p>
		<p>喜欢茶麻吕的粉丝们称她为:茶茶 茶酱</p>
		<p>粉丝团名称:麦茶 茶粉</p>
		<p>趣味 ニコニコ动画、絵板や絵チャでお絵描き、コス妄想 </p>
	</div>
</a>

css部分:

/* css document */
/* reset */
*{ margin:0; padding:0;}
a{ text-decoration:none;}
a img{ border:0;}

.left_layout{
	/*新增样式 start */
	position:relative;
	overflow:hidden;
	/*新增样式  end  */

	display:block;
	color:#474747; 
	font:12px/1.8 Arial,'\5b8b\4f53',sans-serif;  
	width:500px; 
	margin:50px auto; 
	padding:10px; 
	border:1px solid #e1e1e1;
	zoom:1;	
	-moz-box-shadow:0 0 5px #ccc; 
	-webkit-box-shadow:0 0 5px #ccc; 
	box-shadow:0 0 5px #ccc;
}
.left_layout:after{ 
	display:block; 
	overflow:hidden; 
	clear:both; 
	content:"."; 
	height:0; 
}
a.left_layout:hover{ color:#e73a87;}

.left_layout .side{ 
	float:left;  
	text-align:center; 
	margin-right:10px !important; 
	margin-right:7px;
}
.left_layout .main{ 
	overflow:hidden; 
	zoom:1;
}

/*新增样式 start */
.left_layout .click_fix{
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
	width:5000px;
	height:5000px;
	background:url(about:_blank);
}
/*新增样式  end  */

demo 地址:http://www.jackness.org/lab/img-click-unwork/demo03.html

分类bug整理
阅读 1,755
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS