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

我用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. jsp笔记3(内置对象)

    jsp脚本中的9个内置对象: 1.application:javax.servlet.ServletContext的实例对象,该实例对象代表jsp所属的web应用本身,可用于在jsp页面或Servle ...

  2. SQL 统计某一列出现的总和

    现有数据如上图所示,要求统计出日期相同的Count总数,并且加一列统计前面日期Count的总和 SELECT SUM([Count]) AS DayTotal, SUM(SUM([Count])) o ...

  3. Ubuntu 16.04网络管理工具NetworkManager无法使用nm-tool的问题

    说明: 1.在Ubuntu中网络设置分两类,一个是GUI配置工具NetworkManager,另一个是命令行的配置,两者只能共存一个,也就是说其中一个设置之后另一个就会失效: 2.NetworkMan ...

  4. 小程序redirectTo不跳转

    微信小程序解决方案专辑:http://www.wxapp-union.com/special/solution.html 上面有很多新手坑,多搜搜一般都有. 举个例子: redirectTo不跳转的原 ...

  5. maven项目中的GroupId和ArtifactId分别是什么含义

    转自 创建maven项目是其中的group id和artifact id怎么填写 groupid和artifactId被统称为“坐标”是为了保证项目唯一性而提出的,如果你要把你项目弄到maven本地仓 ...

  6. [置顶] kubernetes资源类型--deployment

    Deployment(中文意思为部署.调度)提供了一种更加简单的更新RC和Pod的机制,K8S版本1.2实现的.通过在Deployment中描述所期望的集群状态,Deployment Controll ...

  7. 使用Spring的AbstractRoutingDataSource实现多数据源切换

    https://www.cnblogs.com/softidea/p/7127874.html?utm_source=itdadao&utm_medium=referral https://b ...

  8. Linux学习之二十一-shell编程基础

    Shell编程基础 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言.Shell 是指一种应用程序,这个应用程序提供了一个 ...

  9. javascript event loop

    原文: https://blog.csdn.net/sjn0503/article/details/76087631 简单来讲,整体的js代码这个macrotask先执行,同步代码执行完后有micro ...

  10. Elasticsearch教程(九) elasticsearch 查询数据 | 分页查询

    Elasticsearch  的查询很灵活,并且有Filter,有分组功能,还有ScriptFilter等等,所以很强大.下面上代码: 一个简单的查询,返回一个List<对象> ..    ...