问题可以简单描述为在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 οnmοuseοver="hover(event)" οnmοuseοut="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. 等待微软解决...
