IE下object元素遮挡div表单
目前遇到这样的一个问题:
我用ActiveX插件做了一个C#的播放器,要将这个插件放到web浏览器中,然后可以通过前台页面来控制视频的播放,暂停还有回放,这个时候发现object的onclick事件无法相应,一搜索,确实是这样。那么怎么办呢?万能的搜索啊,终于有两种解决方案:
1,js监听ActiveX控件的行为。(按照网上给的,行不通,监听失败,原因是很多都是10年左右用vc++写的ocx插件的方法,现在行不通)
2,直接通过js控制。
很明显采用第2个方法,于是新的问题就出现了:
怎么调用?
于是有搜索,一种解决方案:div覆盖。
于是就出现了标题中的问题:IE下object元素遮挡div表单
解决方案为:用iframe:
原理:Iframe框架可以遮盖OBJECT、SELECT,DIV可以遮盖Iframe。因此,我们可以将Iframe放置在DIV层内,将Iframe大小宽度设置成与层一样放置在层之下,当层经过OBJECT、SELECT时,下方的框架将替层遮盖其不能遮盖的控件。
需要说明的是使用HTML标签属性设置显示层次,必须是z-Index而不是zIndex。zIndex是使用脚本动态修改属性使用。两者不通用。
原因:
大多表单控件或HTML控件是使用浏览器本身渲染绘制,因此层次可以由浏览器自身控制。而SELECT控件是Windows窗口控件,同样可见型ActiveX容器也是使用面向Windows技术开发。它们表现实质仍是相同,都是Windows窗口包含句柄。因此,浏览器不能对其调整层次,浏览器本身与他们都是平级的
最后解决方案:
<td class="videoBox">
<div class="videoDiv" style="background-color:#f00;" onclick="clickme()">
<iframe src="about:blank" frameBorder=0 marginHeight=0 marginWidth=0
style="position:relative; visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';">
</iframe>
</div>
<object id="player00" name="player00" classid="clsid:0aafd513-e1ed-4ce9-8539-9434f9106030" selected="true" displaying="true" style="width: 100%;height: 590px;margin: auto" >
</object>
</td>
object覆盖div
对应的CSS
.videoBox{
position:relative; /*给表格的td设置绝对定位属性*/
}
.videoDiv{
width:100%;
height:100%;
position:absolute;
left:5px;
top:;
z-index:;/*给覆盖在视频上面的div设置相对属性,其中z-index一定要比视频的z-index数值高*/
}
object{
position:relative;
left:;
top:;
z-index:;
}
对应的css
原文来自于
IE下object元素遮挡div表单的更多相关文章
- amazeui学习笔记--css(HTML元素3)--表单Form
amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...
- HTML元素大全(2)-表单
01.<form>表单 <form> 表单是比较重要的HTML元素,块元素,主要作用是向服务端提交数据.结合表单元素input使用,通过内部的button按钮提交(type=& ...
- 基于div表单模拟右对齐
基于div表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
-----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...
- Express下使用formidable实现POST表单上传文件并保存
Express下使用formidable实现POST表单上传文件并保存 在上一篇文章中使用formidable实现了上传文件,但没将它保存下来. 一开始,我也以为是只得到了文件的相关信息,需要用fs. ...
- MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求
假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...
- 获取表单内的所有元素的值 表单格式化插件jquery.serializeJSON
简单描述:一个form表单里有十几个input或者select,要获取到他们的值,我的做法一直都是$("#id").val();这样做本来没什么说的,但是如果有很多呢,就很麻烦,看 ...
- Object 标签遮挡 Div 显示
最近在使用 Object 时,就是播放视频的 Object 标签遮挡住其他 div 标签,不能正常显示. 出现这种现象的原因: object 标签不在 dom 文档流里面,浏览器在解析的时候先把 ob ...
- webdriver--定位一组元素+iframe表单切换
定位一组元素:find_elements,返回的是list,所以可以用列表的索引对列表里的某个元素操作,也可以用for循环访问list,依次操作各元素 driver.find_elements_by_ ...
随机推荐
- Visio中如何让重叠图形都显示
如图,两个矩形重叠部分的边框都显示了,是拆分操作,不是组合.
- POJ 3486 & HDU 1913 Computers(dp)
题目链接:PKU:HDU: PKU:http://poj.org/problem?id=3486 HDU:pid=1913" target="_blank">htt ...
- util.date.js
ylbtech-JavaScript-util: util.date.js 日期处理工具 1.A,JS-效果图返回顶部 1.B,JS-Source Code(源代码)返回顶部 1.B.1, m.y ...
- 项目笔记:导出Excel功能分sheet页插入数据
导出Excel功能分sheet页处理数据: /*导出EXCEL*/ public void createExcel() { log.info("导出Excel功能已经启动-BEGIN&quo ...
- account for 与led to和result in的区别
account for sth:be the explanation of sth; explain the cause of sth 作某事物的解释; 解释某事物的原因:His illness ac ...
- hdu 5012 bfs --- 慎用STL 比方MAP判重
http://acm.hdu.edu.cn/showproblem.php?pid=5012 发现一个问题 假设Sting s = '1'+'2'+'3'; s!="123"!!! ...
- postman里面的mockserver使用方法
转载:http://blog.csdn.net/Cloud_Huan/article/details/78326159 首先说下mockserver是干啥的,从英文翻译理解就是模拟一个服务器,通俗点说 ...
- Beautiful Soup 4.4.0 基本使用方法
Beautiful Soup 4.4.0 基本使用方法Beautiful Soup 安装 pip install beautifulsoup4 标准库有html.parser解析器但速度不是很快一般 ...
- Java 分支结构 - if...else/switch
Java 分支结构 - if...else/switch 顺序结构只能顺序执行,不能进行判断和选择,因此需要分支结构. Java 有两种分支结构: if 语句 switch 语句 if 语句 一个 i ...
- 解决safari中iframe嵌入不能滚动的问题
做完了个webapp之后,开发的时候一直在浏览器上模拟ios,没有任何问题,谁知交差的时候,客户告知在ios浏览器中不能滚动嵌入的iframe,直接就滚动外层整个document了,你知道docume ...