IE CSS Bug系列:IE8中按钮:active状态背景移动

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

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

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

影响的IE版本

这个bug影响IE8

表现

<button>及<input type=”submit”>的背景在:active状态下会向左上偏移。

时间

2009.8.13 18:19:22

描述

尽管CSS规范声明过:CSS2.1并没有定义哪些属性可以被用于表单控件及框架,或是怎样通过CSS描述它们的样式,但浏览器仍可能会将CSS属性应用于之上。规范建议开发者将其视作实验性的支持 (CSS2.1 Section 3.2 – UA Conformance) 。不过,与这个页面(我发现该bug的地方)的作者观点相同,我认为这确实是一个bug。我们来看演示!

演示
示例在这个页面

HTML代码:

CSS 代码:

这里IE8试图显得“聪明”一点,它将:active状态下的背景作了移动来笨拙地模拟“按钮按下”的效果。就是说,当你点击<button>或者<input type=”submit”>时,其背景会向左上偏移一点点。

 

解决方案

以下是上述bug的解决方法(以类型排序)

解决方法(条件注释法)

该方法的时间

2009.8.13 18:40:49

可修复的的版本

所有受该bug影响的版本

描述

以毒攻毒——我们特别地针对IE8下修改:active状态的background-position来修复这个bug。我们来看下:

修复bug的演示在

HTML代码:

CSS代码:

条件注释代码:

:active状态下的背景在每个方向上偏移了2px。与最初的:hover状态(或正常状态)的偏移相比,针对IE8的偏移会向右、向下多出1px,这样,在我们的演示中background-position设置为1px -29px。

如果你跟我一样希望为所有版本的IE使用一份样式表(或者你想把对该bug的修复放在正常的样式表中),只需在:active状态下使用

副作用

这个方法的副作用是,如果用户点击后将鼠标移出按钮或者双击按钮,按钮背景的移动还会被看到。因为这种情况很少发生,我觉得不必担心它。我找到这个bug的页面中,作者还列出了一种标记的方法,(我猜可能)不会产生这样的副作用。不过,因为那个方法不适用于<input type=”submit”>,所以我没有把它包含到这个页面中。

收藏 评论

关于作者:nighca

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

相关文章

可能感兴趣的话题



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