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

我用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. 透视投影(Perspective Projection)变换推导

    透视投影是3D固定流水线的重要组成部分,是将相机空间中的点从视锥体(frustum)变换到规则观察体(Canonical View Volume)中,待裁剪完毕后进行透视除法的行为.在算法中它是通过透 ...

  2. 【状态压缩DP】【BZOJ1087】【SCOI2005】互不侵犯king

    1087: [SCOI2005]互不侵犯King Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3135  Solved: 1825[Submit][ ...

  3. LCIS线段树(区间更新)

    首先线段树每一个节点包含:[b,e],lmax,rmax,max;其中lmax表示从左端点开始连续的最长的增序列长度,rmax表示从e端点开始向左连续的最长下降序列长度,max表示当前区间的连续递增的 ...

  4. tensorflow cnn+rnn基本结构

    #CNN x = tf.placeholder(tf.float32,[None,input_node],name="x_input") y_ = tf.placeholder(t ...

  5. log4j教程 6、Logger方法

    Logger类提供了多种方法来处理日志活动. Logger类不允许实例化一个新的记录器实例,但它提供了两个静态方法获得一个 Logger 对象: public static Logger getRoo ...

  6. 【Hive】Hive 基础

    Hive架构: Hive基础 1 概念 1.1 简介 1.1.1 hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表, 并提供简单的sql查询功能,可以将sql语句 ...

  7. python 处理抓取网页乱码问题一招鲜

    FROM: http://my.oschina.net/012345678/blog/122355 相信用python的人一定在抓取网页时,被编码问题弄晕过一阵 前几天写了一个测试网页的小脚本,并查找 ...

  8. WINDOWS 2003系统时间24小时制与12小时显示格式不一致问题与解决

    WINDOWS 2003 SERVER系统时间24小时制与12小时格式不一致问题,而导致论坛或BLOG不能正常显示更新日期的问题及解决方法问题的方法. 在WIN2003上出现这种情况的原因是在程序中使 ...

  9. HTTP请求和响应2:方法(Method)

    方法表明了client希望server对资源运行的动作.经常使用的方法包含:GET.HEAD.POST.PUT.TRACE.OPTIONS和DELETE,每一个server能够实现这些方法中的部分或者 ...

  10. Error:[$parse:lexerr]

    1.错误描写叙述 2.错误原因 由错误提示可知,有关AngularJS代码不符合语法,导致报错 3.解决的方法 检查发现,title标签中的data-ng-bind属性使用方法有误 <title ...