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

我用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. 【bzoj1598】【 [Usaco2008 Mar]牛跑步】启发式搜索思路+spfa

    (上不了p站我要死了,侵权度娘背锅) 最近复习搜索,先从启发式搜索来吧. 感觉启发式搜索这玩意挺玄学的,先从其思想入手,做一道经典的K短路. Description BESSIE准备用从牛棚跑到池塘的 ...

  2. Android自定义View(二)

    前言 魅族手机的闹钟应用中有个倒计时,这个控件还是蛮有趣的.左边是魅族闹钟,右边是我们最终实现的效果,虽然有些细节还需优化,不过基本上已经达到了想要的效果,我们先来就来看看如何实现吧. 分析 确定宽高 ...

  3. 关于可变参数列表stdarg

    1.对于可变参数 可变参数列表通过stdarg.h中的宏实现: 主要有一个va_list类型 三个宏:va_start,va_arg,va_end; va_start格式: va_start(argu ...

  4. django开发环境部署之pip、virtualenv、virtualenvwrapper

    step1:安装pip 在python中可以使用easy_install和pip安装python拓展但推荐使用pip Don't use easy_install, unless you like s ...

  5. ElasticSearch的内存设置

    编辑ElasticSearch中bin目录下 vi elasticsearch中 加上   export ES_HEAP_SIZE=24g 修改配置文件 config/elasticsearch.ya ...

  6. [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD!

    原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...

  7. Python - 连续替换(replace)的正則表達式(re)

    字符串连续替换, 能够连续使用replace, 也能够使用正則表達式. 正則表達式, 通过字典的样式, key为待替换, value为替换成, 进行一次替换就可以. 代码 # -*- coding: ...

  8. Poj 4227 反正切函数的应用

    Description 反正切函数可展开成无穷级数,有例如以下公式 (当中0 <= x <= 1) 公式(1) 使用反正切函数计算PI是一种经常使用的方法.比如,最简单的计算PI的方法: ...

  9. JAVA Eclipse如何导出APK程序

    为了最快的导出程序,直接导出未签名的APK   但是大部分手机不允许安装未经签名的程序   导出签名的项目   设置密码,后面的都可以随便设置   这样最后生成的APK就可以直接双击完成安装     ...

  10. Shell 同时读取多个文件

    现有两个文件 1.txt  2.txt,内容分别如下: [root@SHO-XXW-- readmulti]# .txt [root@SHO-XXW-- readmulti]# .txt a b c ...