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

最新推荐文章于 2024-05-16 13:32:02 发布

天使小宝

最新推荐文章于 2024-05-16 13:32:02 发布

阅读量3.4k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/myjlvzlp/article/details/8229270

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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>