IE6、IE7下解决Select框不随滚动条滚动的问题

来源：互联网发布：软件委托开发合同编辑：程序博客网时间：2024/05/21 16:56

IE6、IE7下解决Select框不随滚动条滚动的问题

如果在IE6、IE7下出现Select下拉框不随滚动条滚动的问题，那么你肯定对Select框设置了position:relative;定位并且其父元素或祖先元素设置了overflow:auto这两个CSS样式了。正是因为这两个样式导致了在IE6和IE7下的这个问题。

其实解决办法很简单，就是对Select的父元素或者祖先元素也加个定位position:relative;这样在IE6和IE7下就不会出现Select框不随滚动条滚动的问题了。

如果你担心加了position:relative;会对IE8以上浏览器或者其他浏览器有影响的话，那你可以使用CSSHOCK来解决，即把position:relative;改为*position:relative;就可以了。

其不同场景的图片如下,在解决之前运行的效果：

解决之后出现的运行效果：

其具体解决办法如下：Solve.html

<!DOCTYPEhtml><html>    <head>        <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">        <title>IE6、IE7下解决Select框不随滚动条滚动的问题</title>        <style>            select{                margin-top: 20px;                position: relative;            }            input[type='text']{                margin-top: 20px;                position: relative;            }            #parentCss{                margin: 10px auto;                width: 230px;               height: 145px;                border: 1px solid red;                overflow: auto;                *position:relative;            }        </style>    </head>    <body>        <div id="parentCss">            <divclass="valueClass">IE7测试1：<select style="width:120px;"></select></div>            <divclass="valueClass">IE7测试2：<select style="width:120px;"></select></div>            <divclass="valueClass">IE7测试3：<input type="text" style="width:120px;"></input>            <divclass="valueClass">IE7测试4：<input type="text" style="width:120px;"></input>            <divclass="valueClass">IE7测试5：<select style="width:120px;"></select></div>            <divclass="valueClass">IE7测试6：<select style="width: 120px;"></select></div>            <divclass="valueClass">IE7测试7：<input type="text" style="width:120px;"></input>            <divclass="valueClass">IE7测试8：<select style="width:120px;"></select></div>            <divclass="valueClass">IE7测试9：<select style="width: 120px;"></select></div>            <divclass="valueClass">IE7测试10：<select style="width:120px;"></select></div>            <divclass="valueClass">IE7测试11：<input type="text" style="width:120px;"></input>            <divclass="valueClass">IE7测试12：<select style="width:120px;"></select></div>            <divclass="valueClass">IE7测试13：<select style="width:120px;"></select></div>        </div>    </body></html>