目前遇到这样的一个问题:

我用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表单的更多相关文章

  1. amazeui学习笔记--css(HTML元素3)--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

  2. HTML元素大全(2)-表单

    01.<form>表单 <form> 表单是比较重要的HTML元素,块元素,主要作用是向服务端提交数据.结合表单元素input使用,通过内部的button按钮提交(type=& ...

  3. 基于div表单模拟右对齐

    基于div表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...

  4. JS、jqueryie6浏览器下使用js无法提交表单的解决办法

    -----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...

  5. Express下使用formidable实现POST表单上传文件并保存

    Express下使用formidable实现POST表单上传文件并保存 在上一篇文章中使用formidable实现了上传文件,但没将它保存下来. 一开始,我也以为是只得到了文件的相关信息,需要用fs. ...

  6. MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求

    假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...

  7. 获取表单内的所有元素的值 表单格式化插件jquery.serializeJSON

    简单描述:一个form表单里有十几个input或者select,要获取到他们的值,我的做法一直都是$("#id").val();这样做本来没什么说的,但是如果有很多呢,就很麻烦,看 ...

  8. Object 标签遮挡 Div 显示

    最近在使用 Object 时,就是播放视频的 Object 标签遮挡住其他 div 标签,不能正常显示. 出现这种现象的原因: object 标签不在 dom 文档流里面,浏览器在解析的时候先把 ob ...

  9. webdriver--定位一组元素+iframe表单切换

    定位一组元素:find_elements,返回的是list,所以可以用列表的索引对列表里的某个元素操作,也可以用for循环访问list,依次操作各元素 driver.find_elements_by_ ...

随机推荐

  1. HTML <form> 标签的 accept-charset 属性

    定义和用法 accept-charset 属性规定服务器处理表单数据所接受的字符集. accept-charset 属性允许您指定一系列字符集,服务器必须支持这些字符集,从而得以正确解释表单中的数据. ...

  2. 使用Chrome DevTools直接调试Node.js与JavaScript(并行)

    Good News: 现在我们可以用浏览器调试node.js了!!! 前提 Node.js 6.3+, 这个可上Node.js官网自行下载: Chrome 55+. 如果您本地的chrome升级到最新 ...

  3. mybatis-mysql小优化

    原文:http://blog.csdn.net/jinzhencs/article/details/51656548 1.查询某条记录是否存在 <!-- 查询s是否被创建过:Uuid,name, ...

  4. 利用jquery.form.js实现将form提交转为ajax方式提交的方法(带上传的表单提交)

    提供一种方法就是利用jquery.form.js. (1)这个框架集合form提交.验证.上传的功能. 核心方法 -- ajaxForm() 和 ajaxSubmit() $('#myForm').a ...

  5. docker ubunt镜像中文乱码,文件名问号解决

    一 安装语言包 中文语言包: language-pack-zh-hans 简体中文 language-pack-zh-hans-base language-pack-zh-hant 繁体中文 lang ...

  6. 6、Python模块

    最常用的两个模块: os    #可以允许python调用执行系统命令,如shell sys    #处理与python程序本身的事情   Python自带200多个常用模块 Python官网收集了2 ...

  7. python之生成excel

    #_*_coding:utf-8_*_ import MySQLdb import xlwt from datetime import datetime def get_data(sql): # 创建 ...

  8. asp.net购物车,订单以及模拟支付宝支付(三)---提交订单

    在设计完订单表之后,就要整理一下订单处理的流程了 首先,用户在购物车界面点击结算的时候,跳到一个结算确认页面(这时候只是确认,让用户填写收货地址等,没有真正的下订单),显示用户的地址等信息和要买的物品 ...

  9. Node.js 网页瘸腿稍强点爬虫再体验

    这回爬虫走得好点了,每次正常读取文章数目总是一样的,但是有程序僵住了情况,不知什么原因. 代码如下: // 内置http模块,提供了http服务器和客户端功能 var http=require(&qu ...

  10. Node.js静态页面展示例子2

    例程下载:https://files.cnblogs.com/files/xiandedanteng/nodejsStaticHtmlSample.rar 页面效果: Html页面代码(注意用文本编辑 ...