最近重新审视了一下块集元素和内联元素,不是混淆,而是重新想了一下新的东西,有时候在我们进行重构的时候,偶尔会为了实际需要而将内联元素强制显示为块集元素,在一般情况下,这个是不会出问题的,而且可以很轻松的通过标准,但是在某一些情况下,虽然验证工具可以放过我们,但是在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标签同级放置,这样也可以避免图片点击不到问题。

标签:
链接图片,点不中

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“ie6和ie7中的链接图片点不中问题讨论”

暂无“ie6和ie7中的链接图片点不中问题讨论”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。