一个由hasLayout引起的渲染例子

摘要

晚上，在某个前端群里面，有人求助，说是某个a标签设置了display:block属性，单是放鼠标上去，就是没有反应，闲着没事，就帮着调了一下。

闲着把问题的发现到解决总结一下，方便后来人，同时有不足之处，还请大家多多指正。

 

正文：

先看页面截图：

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

<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代码：

#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标签挡住了，为了验证自己的想法，将代码精简为：

<div id="content"> <a class="btnBack" href="#">a</a>
  <div class="sec08">
    <h3>h3</h3>
  </div>
</div>

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

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

按照层叠优先规则，动态定位的优先，但在IE里面却出现了相反的情况，即使把a标签的代码已到h3的后面，也依然如此。

针对这个IE特有的问题，一开始想到的就是hasLayout特性，于是，采用最简单的方法，直接在h3的CSS加了zoom属性，问题解决。

但其实依然没有完全解决，情况如下：

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

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

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

但关于此问题的具体原因，还是不得而知，还请高手赐教:)