客户报了一个bug，把我们的控件放在panel中，当panel的滚动条滚动时，UI界面出现异常，某些元素不会随着滚动条的移动而移动， 这种情况只是在浏览器IE6、IE7中出现，在Firefox中也有类似的问题。问题如下图所示：
初始状态
滚动后的状态
检查发现，这些没有随着滚动条的位置移动的元素，都是设置了position样式的元素，为了重现这个问题，我们可以测试如下的例子代码。
测试代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<div id="div1" style="background-color: Blue; height: 500px; overflow-y: scroll">
<div id="div2" style="background-color: Red; height: 300px;">
</div>
<div id="div3" style="background-color: Green; height: 300px; position: relative">
</div>
<div id="div4" style="background-color: Black; height: 300px;">
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<div id="div1" style="background-color: Blue; height: 500px; overflow-y: scroll">
<div id="div2" style="background-color: Red; height: 300px;">
</div>
<div id="div3" style="background-color: Green; height: 300px; position: relative">
</div>
<div id="div4" style="background-color: Black; height: 300px;">
</div>
</div>
</body>
</html>
在IE7中测试如上代码，发现元素DIV3并不会随着DIV1的滚动条的移动而移动。
不知这个问题是否是IE7、IE6的一个bug，在最新的IE8下这个问题不会重现。不过我们既然兼容这些浏览器，就应该解决由这些浏览器带来的问题。如上的问题有两种workaround方法。
（1） 删除DOCTYPE声明行，但是这不是一个好的解决办法，删除DOCTYPE会影响浏览器对整个页面的解析，影响面比较大。
（2） 给scroll的panel设置position样式，设置脚本如下：
var panel1 = document.getElementById("Panel1");
panel1.style.position = "relative";
panel1.style.top = "0px";
panel1.style.left = "0px";
panel1.style.position = "relative";
panel1.style.top = "0px";
panel1.style.left = "0px";
