一个由hasLayout引起的渲染例子

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

正文：

先看页面截图：

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

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

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

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

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

同时在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标签，导致的一系列标签。

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!