IE9 RC版关于overflow的一个bug

来源：互联网发布：药品网络销售好做吗编辑：程序博客网时间：2024/06/07 09:17

问题可以简单描述为在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";elsee.target.style.backgroundColor = "gray";}function leave(e){if (toggleClass)e.target.className = "";elsee.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. 等待微软解决...