您的位置：首页 > 其它

IE9 RC版关于overflow的一个bug

2011-03-02 17:15 375 查看

问题可以简单描述为在overflow=auto的容器内，切换其中元素的class时，会影响到容器的样式

上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.z { background-color : gray }
</style>
<script type="text/javascript">
var toggleClass = true;
function hover(e)
{
if (toggleClass)
e.target.className = "z";
else
e.target.style.backgroundColor = "gray";
}
function leave(e)
{
if (toggleClass)
e.target.className = "";
else
e.target.style.backgroundColor = "";
}

</script>
</head>
<body>
<div style="overflow:auto;width:800px;border:#ff6600 1px solid;">
<div style="width:1000px;">
<div onmouseover="hover(event)" onmouseout="leave(event)">A</div>
</div>
</div>
</body>
</html>

鼠标移动到hover上时，容器的高度拉长，但是滚动条维持在原位。。。

此问题与doctype无关，与元素类型无关，重现问题的要素为：

1. IE9 RC(IE9其他版本会不会有还不清楚...)

2. 容器overflow=auto，固定宽度，不固定高度

3. 内容宽度超过容器宽度

4. 修改内容的class

开始：

鼠标在A上走几次之后：

解决方法：

1. 设置容器高度

2. 不要修改class

3. 等待微软解决...

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航