IE9 RC版关于overflow的一个bug

最新推荐文章于 2024-09-20 16:06:21 发布

occam

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量1.5k

点赞数 2

文章标签： ie class xhtml function html 微软

本文链接：https://blog.csdn.net/Occam/article/details/6218709

版权

问题可以简单描述为在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

开始：