软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 一个由hasLayout引起的渲染例子

一个由hasLayout引起的渲染例子

有朋友求助,说是某个a标签设置了display:block属性,单是放鼠标上去,就是没有反应,闲着没事,就帮着调了一下,闲着把问题的发现到解决总结一下,方便后来人,同时有不足之处,还请大家多多指正。

正文:

先看页面截图

image

红色标记的就是问题所在,其相关html代码是:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<DIV id="content"> <A class="btnBack" href="#">回到首页</A>
<DIV class="sec08">
<H3><IMG src="./images/t.jpg" width="300" height="47" alt=""></H3>
<P><IMG src="./images/p01.jpg" width="425" height="92" alt=""></P>
<P><IMG src="./images/p02.jpg" width="518" height="128" alt=""></P>
</DIV>
</DIV>

PS:XHTML中,标签应该小写,既然浏览器不介意,加上这不是本次的讨论重点,这些就不讨论了,希望新手下次写代码要注意一下这个。再来看看那个A标签的CSS代码:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
#content{
background:url(../images/c.jpg) no-repeat 0 0;
min-height:548px;
_height:548px;
position:relative;
}
.btnBack{
display:block;
width:100px;
height:40px;
position:absolute;
right:80px;
top:10px;
text-indent:-999em;
border:1px solid red;
}
.sec08{
text-align:center;
}
.sec08 h3{
padding:25px 0 40px;
zoom:1;
}
.sec08 p{
margin:0 0 30px;
}

可以看出,a标签并没有使用背景图,仅仅是使用相对定位,结合父层的背景图模拟点击。

问题是:在FF这种比较标准的浏览器中没有问题,但在IE6和IE7却有问题,这个问题比较新鲜,由于我也不是很有此方面的经验,就用笨方法一点点调试。

首先,定位问题代码。也就是把代码一点点地删减,直到问题消失,最后把问题定位到a标签下面的div > h3 此时,觉得可能是h3把a标签挡住了,为了验证自己的想法,将代码精简为:

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<div id="content"> <a class="btnBack" href="#">a</a>
<div class="sec08">
<h3>h3</h3>
</div>
</div>

同时在CSS加了一些调试代码,测试效果图如下:

image

如上图,我将a标签设置了红色边框,同时h3标签设置了绿色边框,此时,在红色框内,绿色线上的区域无点击效果(鼠标放上去的时候输入光标,应该是在相应h3标签),而绿色线下面的区域则正常,说明了a标签正是被h3标签挡住了。

按照层叠优先规则,动态定位的优先,但在IE里面却出现了相反的情况,即使把a标签的代码已到h3的后面,也依然如此。针对这个IE特有的问题,一开始想到的就是hasLayout特性,于是,采用最简单的方法,直接在h3的CSS加了zoom属性,问题解决。

但其实依然没有完全解决,情况如下:

image

当鼠标放在绿色边框上时,依然没有点击效果,对于追求完美的程序员,这依然是不能接受的,又何况zoom不是标准的CSS属性,所以在此,继续改进。

针对自己“h3遮挡了a标签”这种想法,做了一些尝试,但最后都没有成功,至于原因,估计只能问IE的开发人员了,所以最后我还是回到设计图上,换一种解决方法。针对h3所在层,采用的解决方案是:
1.固定宽度+居中对齐
2.margin:0 200px;

这样就避免了有元素挡住a标签,导致的一系列标签。

    相关阅读
    栏目导航
    推荐软件