以下为网上通用解决办法
解决方法之一:Iframe包裹select元素
使用iframe包住select,这样iframe有z-index,只要在div上设置的z-index比iframe的高即可~这种方法有一定的局限性,不可能每个select都要加个iframe吧?所以不推荐!代码如下:
<iframe style="z-index:1" style="z-index:1"><!-- 用iframe 解决此bug -->
<select name="country">
<option value="1">china</option>
<option value="2">japanese</option>
<option value="1">U.S.A</option>
</select>
</iframe>
解决方法之二:以Iframe作为div的子元素,覆盖select元素
建立一个跟div同宽同高的iframe,并且z-index比div要低。这种方法推荐使用:
<style>.T_iframe
{
position: absolute;/*绝对定位保证iframe不会占用流布局空间*/
width: 100%; /*100%保证可以覆盖整个div*/
height: 100%;
z-index:-1; /*-1保证iframe显示在div下方*/
}
.T_div
{
position: absolute;
left:100px;
top:50px;
width: 300px;
height: 200px;
background : blue;
z-index:100;
} </style>
<div class="T_div">
<span>这里可以包含其他dom元素</span>
<iframe class="T_iframe"></iframe>
</div>
解决方法之三:使用jQuery的bgiframe插件
如果你的项目引用了jQuery,那么我推荐使用bgiframe插件来解决select的遮挡div问题,原理很简单,就是建立一个同高同宽的iframe插入到div中去~bgiframe下载地址:http://github.com/brandonaaron/bgiframe,使用方法:
$('.fix-z-index').bgiframe();
参数说明:
top:设置top位置,默认为auto
left:设置left位置,默认为auto
width:设置iframe宽度,默认为auto
height:设置iframe高度,默认为auto
opacity:设置是否透明,默认为true
src:设置iframe的src,默认为javascript:false
分享到:
相关推荐
在IE6的環境下,如果網頁上有div區塊和下拉選單重疊在一起的時候,即使再怎麼調整下拉選單的z-index,下拉選單還是會把div區塊蓋住(在Firefox是正常的),google了一下網路上的資料,大多是用iframe來解這個問題,但...
今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。 解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-...
在Web开发中我们经常通过z-index设置多个元素之间的层叠关系,这种...所有的有窗体元素都会出现在无窗体元素之上,而有窗体元素和无窗体元素自身遵循z-index属性约束(注意使用z-index必须设置相应元素的position为a
到新地方有些日子了,差不多适应了这边的工作节奏与流程。...可是真有些日子没有写DIV+CSS了,而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目),...z-index属性z-index规范参考在IE下出现的问题在IE6下z-index的问题
select-option-disabled-emulation.js解决IE6 Select 中 option 的disabled属性无效的办法~~~在页面加载时架子该js,呵呵有点问题:onchange 时间冲突 自己改改··
利用Jquery解决IE6下,Select的Z-index过高的BUG 经常有朋友下拉菜单被Select遮盖。可以用此方法解决!
Anaconda必备的安装包,离线下载下来的,需要的自己取
npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui,则需要引入一个单独的element-ui包,如下所示: import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; ...
ie8-select滚动条
npm install react-select-country-list --save 或者 yarn add react-select-country-list 例子 import React , { useState , useMemo } from 'react' import Select from 'react-select' import countryList ...
解决IE6 中select 穿透 div 等层的问题
layui第三方插件xm-select,layui index.html文件中引入xm-select.js即可实现下拉多选框功能效果
bootstrap-select-1.13.0-dev bootstrap-select开源地址:https://github.com/silviomoreto/bootstrap-select
bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-...
他在ie下也能选中文字,但是选中其他列表,不会选中文字,原来它是在不同div中,属于不同的范围,而同事是放在同一个table中,当然会选中。 而在firefox下,文字不会被选中,查看google calender的css,原来还有-moz...
用div+jq高仿ie6的select表单随内容增加 进行了一个升级,将其做成一个类似插件的形式; 在html中,依旧是应用传统的select进行布局,只需要给select一个class为toDiv,就可以动态的将select替换为已经设置好了的div...
select 下拉搜索框 兼容ie8 9 10 11,谷歌 火狐 等浏览器
bootstrap-select 下拉多选,
在layui中实现下拉框select多选,取值