|
有时候由于需要文字和图片同时获取到点击态，或者需要实现一些高难度的效果，就需要多标签来写结构，可能的结构会如下所示.
最近重新审视了一下块集元素和内联元素，不是混淆，而是重新想了一下新的东西，有时候在我们进行重构的时候，偶尔会为了实际需要而将内联元素强制显示为块集元素，在一般情况下，这个是不会出问题的，而且可以很轻松的通过标准，但是在某一些情况下，虽然验证工具可以放过我们，但是在ie6下面会出现解析不正确的问题，下面就简单跟大家分享一下这个问题。
有时候由于需要文字和图片同时获取到点击态，或者需要实现一些高难度的效果，就需要多标签来写结构，可能的结构会如下所示：
<div class="block">
<a href="https://www.jb51.net"><span><img src="https://www.jb51.net/wp-admin/images/jb51.png" alt="Raina" /></span></a>
</div>
在没有被赋予强大的CSS的时候，是可以正常点击的，但是当赋予需要的CSS的时候，在ie8一下就会出现图片区域点击不到的情况：
.block span{float:left;}
如果将span标签块集化：
.block span{float:left;dispaly:block;width:100px;height:100px;}
最终的结果依然不是不能点击到，但是图片区域以为的内容确可以正常点击。
而对于此，我的理解是这样的：
因为a标签本身就是一个内联元素标签，内联标签内正常情况只允许放置内联元素，放置块集元素本身语法就有问题，虽然表面上放置的span标签，但是我们又将其强制块集化，在某些浏览器下还是会解析错误，比如说ie6/7，所以这里针对链接的这种情况，出现的问题就是图片区域无法点击。
针对这种问题的解决方法：
保证在a标签中不要放置块集元素，或者强制块集元素，如果需要解决一些特殊效果，可以采取将这个强制元素跟a内置的img标签同级放置，这样也可以避免图片点击不到问题。 | 
发表于 2009-9-22 00:27:43
