IE下 select 框浮在页面最上方的解决办法

最新推荐文章于 2023-10-20 16:33:53 发布
最新推荐文章于 2023-10-20 16:33:53 发布
阅读量695 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： IE Firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xinghu_002/article/details/83534215
本文介绍了一种解决IE浏览器中浮动层显示问题的方法。针对IE下浮动层被Select元素覆盖的问题，提出了两种解决方案：一是通过增加iframe实现隔离；二是使用JavaScript动态控制Select元素的显示与隐藏。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

做了个浮动页面，在点击页面的某个按钮触发。

 

firefox良好，IE下挂了。

 

IE下select框浮在最外层。

 

解决：1，在浮动层外边套 <iframe>

 

         2，用js在浮动层弹出的同时，干掉select框，在浮动层消失的时候 再把框弄回来。

 

我比较懒，不想大改浮动层结构，用了第2种办法

xinghu_002
关注
html 下拉框超出页面,关于ElementUi中select框在页面滚动时el-option超出元素区域的问题...
weixin_39773447的博客
06-03 1430
问题：在项目开发中发现elementUi中的select组件在页面滚动时会随着页面滚动并遮盖页面，如下图： 遇到这问题首先想到的是组件是否有相关设置属性，发现popper-append-to-body属性发现不行。在网上找到了相关的解决办法，在下面贴出来！！！1、创建js文件// fackClickOutSide.jslet lock = true;let el = null;const Mous...
Element-UI中select的下拉框popper 定位超出可视区的解决方案
beiniao123的博客
09-10 4717
一、问题描述： 当弹出框有表格el-table，el-table中有el-select，当滚动滚动条时，el-select的下拉框超出了弹出层 二、问题分析 产生该问题的原因是，滚动表格时，el-select的输入框被隐藏了，但是下拉框el-popper使用的定位方法是fixed，当显示时，使用的z-index非常大，因此显现在最上层，当滚动滚动条往下移动时el-popper并没有被隐藏。 三、解决方案 当表格滚动时，直接隐藏掉下拉框 四、代码 获取父级元素，并监听该元素的滚动事件，这里使用的是el-t
下拉框处于漂浮层上面的问题解决方案
Cason2014的专栏
04-24 844
由于<select>的优先级高于<div>在IE6下容易出现漂浮层被下拉框覆盖的情况，IE8下未出现此类问题。 下面是页面代码： 1 <div id='img' style='position:absolute;z-index:9999999;' onmouseover='mystop()' onmouseout= 'start()' runa...
自己做一个select，点击，展示下拉框；如果下面区域不够，就在上面展示
最新发布
weixin_46601685的博客
10-20 1127
经常会遇到滚动+select组合，如果页面可以滚动，且select距离下面的地方不够了，select就会撑起一定的高度。好多时候，antDesign或者element ui的select的样式不满足需求。所以就制定方案，如果不够用了，就在上面展示。但是如果改样式，耗费时间很长。
解决浮动层无法浮动在select控件之上的问题
weixin_30514745的博客
08-05 299
这些天做MOSS2007的全局导航控件，遇到一个不大不小的问题，困扰了我一天多的时间。原来，在IE6.0及以下版本，浮动的层遇到诸如select之类的控件时，会无法浮动在这些控件的上层，即便使用z-index也不管用。 查资料确定这是IE的一个Bug，在IE7.0及以上版本或者其它类型的浏览器上不存在该问题。解决的办法有三种：层浮动到select之上时隐藏select控件；用Ob...
select显示固定条数以及选中option后会整体向上移动的问题解决
weixin_30773135的博客
03-08 618
今天在开发中遇见一个小小的问题 就是写select下拉时 需要限制显示的条数，出现滚动条 解决好这个问题后 又发现 select选中后 会出现整体移动的问题 显示固定条数 直接上代码 然后解决 整体上移的问题 就是改变其对其方式 转载于:https://www.cnblogs.com/zhige-1/p/10494279.html...
ie6 select无法被div遮盖的bug解决方法
09-22
当一个`<div>`元素试图遮盖页面中的下拉列表框`<select>`时，无论`<div>`的`z-index`值设置得多高，`<select>`仍然会穿透`<div>`显示在上方。这是由于IE6对下拉列表框的渲染机制不正确导致的，特别是其弹出式的下拉...
解决DIV在IE下被下拉列表select穿透的问题(一)
03-01
本文将深入探讨如何解决一个特定的IE浏览器问题：DIV元素在Internet Explorer（IE）下被下拉列表（select）穿透的问题。 标题提到的“解决DIV在IE下被下拉列表select穿透的问题(一)”是一个典型的老版IE浏览器渲染...
Jquery 解决IE6 Select 框总是在图层（div）的上面显示的BUG
11-11
确保正确引用和执行这些代码，就可以在IE6下成功地解决Select框覆盖其他图层的问题。 总的来说，尽管IE6的这种行为给开发者带来了困扰，但通过巧妙利用jQuery和iframe，我们仍然能够有效地解决这一问题。不过，随着...
在IE8 FF中使用padding设置select控件文字垂直居中
09-25
在IE8和Firefox（FF）等较早版本的浏览器中，实现select控件内文字的垂直居中一直是一个难点，因为这些浏览器不支持CSS3的transform属性，而这个属性是现代浏览器中调整元素内文字垂直居中的常用方法。 根据给定...
深度解析DIV在IE中select下拉穿透的解决方案
解决DIV在IE下被下拉列表select穿透的问题是一个常见且急需解决的Web兼容性问题。通过使用jquery.bgiframe插件，可以有效避免此问题，并保证不同浏览器下的用户体验一致性。通过阅读相关博文和示例代码，开发者能够...
layui的table查询编辑&tableSelect控件使用
代码笔记
06-21 4676
【代码】layui的table查询编辑&tableSelect控件使用。
如何让浮动的div层显示在select组件的上面
逝者如斯夫
07-23 3648
<br />一、发现问题<br />    问题：浮动层被select组件覆盖住一部分。<br />    代码部分：浮动层<br />    程序代码<br />    <div class="selectClass" id="selName" ><br />            <dl><a href="#">软件</a></dl><br />            <dl><a href="#">硬件</a></dl><br />     </div><br />二、方法一<br />    上网搜
解决div遮挡select的问题
white_smile的专栏
02-26 1330
处理层级关系，在select和div的样式中加入z-index属性，比如select中加入style="z-index:0"，div中加入style="z-index:1"解决div遮挡select的问题
IE6兼容：JavaScript解决DIV覆盖select框问题
2. **使用z-index调整**: 通过JavaScript动态调整z-index属性值，以确保select框能显示在最上层。 3. **调整DOM结构**: 通过JavaScript改变DOM元素的顺序或者使用绝对/相对定位，来保证select框不被其他元素遮挡。 4...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值