此问题,早有耳闻,可是一直都没有亲身碰到过,也就没有过多的去在意这些问题。

这一回总算是见识到了ie的厉害。虽是在ie选项中大大的写着ie版本号是ie11 。可是有些部分确实走的ie6的内核。怪不得微软天天在各种window update.

解决此问题的方法非常easy。给你须要显示的内容的后面加一个iframe,让他去挡住select不要穿透过来。这样世界就算是清净了。

例如以下html:

<body>
<div>
<select>
<option value="">select穿透问题</option>
<option value="">select穿透问题</option>
</select>
</div>
<div class="wrap" style="position:relative;width:200px;height:200px;">
<div class="content">须要显示的内容</div>
<iframe class="ie-select-iframe" style="position:absolute;top:0;left:0;z-index:-1;width:200px;" scrolling="no" frameborder="0"></iframe>
</div>
</body>

这里须要注意的是:

1 wrap仅仅是一个容器,所以border之类的样式。最好不要放在这里,由于这个div是会被select穿透的。

2 iframe的宽度最好给一个值,在ie6下,要使用100%。似乎还要做一些别的设置。须要给,html,body都给height:100%,才干实现。否则在ie6下无效。

IE6 select穿透问题(div 定位无法遮盖select)!的更多相关文章

  1. IE6下div遮盖select的最优解决方案

    a.本节精选html5/css频道里一款IE6下div遮盖select的最优解决方案 原理:利用iframe来遮挡select,再用div来遮挡iframe,就这么简单. 1)首先,建一个div层和i ...

  2. 【IE6的疯狂之五】div遮盖select的解决方案

    IE6以及一下版本下,选择框Select会覆盖Div中的内容一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容.由于Iframe的可以显示在Select上层,就可以解决这个问题.不 ...

  3. 解决IE6下浮动层固定定位的经典方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. selenium自动化实例: 多层框架中关于iframe的定位,以及select下拉框选择

    对于一个自动化的初学者来说会很常见的遇到元素明明存在却始终定位不到, 从而导致脚本报错,当然定位不到元素的原因很多, 其中一种就是多层框架iframe导致的 下方截图示意: 下方为写脚本时候的示例并其 ...

  5. IE6浏览器不支持固定定位(position:fixed)解决方案(转)

    IE6浏览器不支持固定定位(position:fixed)解决方案   来源:互联网 作者:佚名 时间:12-04 10:54:05 [大 中 小] 点评:有些朋友在进行网页布局时,会遇到IE6浏览器 ...

  6. html中div定位练习

    html中div定位练习,实现简单的计划列表: 记录div定位时主要的属性:float.position等,以及对应的relative和absolute等,同时使用到angular js中的数据绑定, ...

  7. div定位

    1.float定位带来的问题<html> <head> <title>div浮动引发的问题</title> </head> <styl ...

  8. 自己写的一个用js把select换成div与span与ul的东西

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. div定位relative和absolute测试1

    div里的position定位也是比较常见的,relative是相对定位,absolute是绝对定位.如本文测试:body自带8px的margin,这里不对其进行清空.蓝色的div和红色的div分别设 ...

随机推荐

  1. 【代码笔记】iOS-plist获得城市列表

    一,工程图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...

  2. 关于初步搭建完成SSH环境之后,JUnit test 测试成功,页面测试时:@Resource 注入的dao为null

    这个问题研究了一天,还是因为配置的时候没有认真,一不小心,酿成了大错.当发现的时候感觉好尴尬啊::>_<:: CostAction: package com.tenni.action; i ...

  3. Chrome下解决本地异步请求失败的问题(Origin null is not allowed by Access-Control-Allow-Origin. )

    Chrome更新版本后发现打开本地Jquery easyui没有数据,查看控制台才发现如下问题解决的办法是设置启动参数"--allow-file-access-from-files" ...

  4. python 复制文件到其他路径

    #!/usr/bin/env/python # -*- coding: utf-8 -*- # @Time : 2018/11/7 16:34 # @Author : ChenAdong # @Ema ...

  5. CSS3动画详解(图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  6. Linux Ubuntu16.04LTS安装TensorFlow(CPU-only,python3.7)——使用Anaconda安装

    1.安装Anaconda(在此不再赘述) 2.用Conda安装TensorFlow 1)建立TensorFlow运行环境并激活 conda create -n tensorflow pip pytho ...

  7. Hibernate 二级缓存配置

    详见:https://www.cnblogs.com/Junsept/p/7324981.html Hibernate的cache管理: Cache就是缓存,它往往是提高系统性能的最重要手段,对数据起 ...

  8. 转:sql语句优化

    性能不理想的系统中除了一部分是因为应用程序的负载确实超过了服务器的实际处理能力外,更多的是因为系统存在大量的SQL语句需要优化. 为了获得稳定的执行性能,SQL语句越简单越好.对复杂的SQL语句,要设 ...

  9. python基础之os.system函数

    前言 os.system方法是os模块最基础的方法,其它的方法一般在该方法基础上封装完成. os的system原理 system函数可以将字符串转化成命令在服务器上运行:其原理是每一条system函数 ...

  10. Python学习--打码平台

    打码平台介绍 作用:可以通过第三方平台进行智能识别或者人工识别图片. 优点:1. 价格便宜: 2. 使用简单: 3. 识别率高 平台介绍: - 云打码(推荐) [http://www.yundama. ...