IE CSS Bug系列:IE7中:hover绝对定位的Bug

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

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

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

影响的IE版本

这个bug影响IE7

表现

对于会改变某绝对定位的子孙元素的left/top偏移值的 :hove r状态,若该元素隐藏在可视区域之外,则该状态不会生效;若该元素可见,其left/top偏移值不会在hover时改变。

教程编写时间

2009.8.14 14:53:45

描述

这是我在 Gérard Talbot 收集整理的 IE7 Bug 页面发现的bug之一。我在这个bug的标题中标明“坏了”的原因是,一开始这看起来好像是:hover被忽略了,但真正的原因是,left/top属性值并没有如在demo中的第二个<div>中我们可以看到的那样发生变化。来看下:

演示

演示在一个单独的页面

HTML代码:

CSS 代码:

在IE7中,当鼠标hover这些<div>时,其中的<p>不会像在正常浏览器中那样移动至完全包含于其包围<div>。这个demo这么大是因为我把这个bug的四种情况都展示了,包括top或是left,绝对定位的元素是完全隐藏或是可见。

要触发这个bug无须特别的条件,只需要把非hover状态的top或left偏移设置为非百分比的的值,并在hover状态下改变为任意非百分比的值。

 

解决方案

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

解决方法(干净的方法)

该方法的时间

2009.8.14 15:19:52

可修复的的版本

所有受该bug影响的版本

描述

解决这个bug的方法除了将top/left设置为百分值之外,还可以使用margin。我们先来看修复demo。

修复bug的演示在一个单独的页面

HTML代码:

CSS代码:

这里我做的是,将margin-left设置为0%—注意这里百分号很关键。即使设置为0产生的是同样的边距效果,但省略百分号将无法修复这个bug。或者你可以将margin在任意方向上使用任意单位设置为任意的非零值。

1 收藏 1 评论

关于作者:nighca

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

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部