Cnscorpio

可关闭的广告banner（在IE中的一个小困惑）

2008-08-19
Web Standard »
8 Comments »

前些天做一个横幅的banner广告，要求点击后能到链接所指向的地址，且能关闭。材料是图片，不是flash。吧唧吧唧，整出来了。。

———1 beta 1———–

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
img{border:none;}
#test{position:relative;}
#offDot{width:20px;height:20px;display:block;position:absolute;top:4px;left:268px;}
</style>
<script type="text/javascript">
function offDot(){
document.getElementById("test").style.display = "none";
}
</script>
</head>
<body>
<div id="test">
   <a href="http://www.cnscorpio.cn" id="bta"><img src="bt.gif" width="300px" height="50px"/></a>
   <a href="#" onclick="offDot();" id="offDot"></a>
</div>
</body>
</html>

——— beta 1———–

DEMO beta1

这个时候，在FF下点击右上角的叉叉能关闭了。。但是在IE下点击#offDot（叉叉）却无法触发关闭事件。起先以为是无法获得布局，于是对他增加了*zoom:1;还是不行，又想，难道是z-index问题？随之设置了它和父元素或兄弟元素间的z-index，让#offDot的z-index高于#test或#bta。但是依然无效。。。

———2 beta 2———–

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
img{border:none;}
#test{position:relative;}
#bta{width:300px;height:50px;display:block;background:url(bt.gif) no-repeat;}
#offDot{width:20px;height:20px;display:block;position:absolute;top:4px;left:268px;}
</style>
<script type="text/javascript">
function offDot(){
	document.getElementById("test").style.display = "none";
}
</script>
</head>
<body>
	<div id="test">
		<a href="http://www.cnscorpio.cn" id="bta"></a>
		<a href="#" onclick="offDot();" id="offDot"></a>
 
	</div>
</body>
</html>

——— beta 2———–

DEMO beta2

上面的这个beta 2通过将banner图片作为#test的背景后，问题解决了。百思不得其解。。。。。IE下a元素包含img后激活范围干扰了绝对定位在它之上的另外的a元素。。。

可关闭的广告banner（在IE中的一个小困惑）

8 Responses to “可关闭的广告banner（在IE中的一个小困惑）”

说两句吧：