您的位置：首页 > 其它

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

2012-11-27 11:28 525 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航