IE CSS Bug系列:图片标签聚焦 Bug

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的@emicats2013 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG 系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文。

—————————————————————————–

影响的版本:

IE8、IE7、IE6

症状:

当点击标签<label>里面的<img>元素的时候,浏览器不会自动将焦点转移到和标签相关的表单控件上。

教程日期:

Wed Aug 19 15:38:47 2009

描述:

这个bug是在 Gérard Talbot 的 IE8 Bug 页面列出的,这还要归功于Batiste Bieler。”前段时间我也“有幸在自己做的网站上遇到这个Bug了,当然这一点也不好玩。我们一起来看看这个bug:

Demo演示:

如需查看完整demo,请点击这个页面

HTML代码:

CSS代码:

这个Demo代码比较长,是为了更全面地展示实际开发中的<form>,而且也能更好说明这个Bug的 CMS(Clean Markup Solution)解决方案。

这个bug的本质就是,如果标签<label>元素里面是一个<img>元素,当你点击<img>元素,没有任何触发,浏览器不会像<label>中的普通文本那样,把焦点转移到和标签相关的表单控件上,一切就好像什么都没有发生过一样。

 

解决方案:

以下是按照解决方案类型排序的解决方案:

 

解决方案 (清理标记方案)

 

解决方案日期:

Wed Aug 19 15:38:47 2009

解决版本:

受影响的全部版本

描述:

既然是img元素的问题,那么就要邀请<span>元素来帮忙,我们来看看如何去实现:

已修复的示例可在这里查看

HTML代码:

CSS代码:

 

我所做的,就是在每个<label>元素中,都在<img>前面插入了一个空的<span>元素,为了消除<span>给<img>带来的偏移,我们给<label>加了一条css: {position: relative;},然后给<span>一个绝对定位并将top和left设置为0,确保<span>在老版IE里不会有令人匪夷所思的偏移。我还设置了足够大height 和 width 确保它可以覆盖整个<img>元素。我还给label设置了{ overflow: hidden; } 来隐藏<span>多余的宽/高。 因为<label>是浮动的,所以我并没有给它设置明确的维度大小。

现在,最有趣的部分在于<span>的background属性:这个解决的是在IE上<span>自己的显示Bug,我认为这个Bug跟“Partial Click Bug v2”有关。问题是,我们需要设置<span>为透明背景来透过它显示图像,但它还需要一个不透明的背景来阻止Bug的发生(这里Bug是指单击跨过<span>,落到图片,导致聚焦失败)。

我的解决方法是用<img>元素中的图片来设置这个背景图片,因为这个图片会被缓存下来,而且给它一个位置偏移让它消失在视野中。当然,你可以设置任何图片背景,甚至可以指定 background: url(#); 或者 background: url(your_css_file.css); 如果这些让代码显得很混乱,你也可以创建一个透明背景的gif图片,把它作为背景。

这个问题解决了,现在<img>在受所影响的IE中都可点击了。$$ ̄▽ ̄)/

收藏 评论

关于作者:emicats2013

(新浪微博:@阳光Emi) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部