使用ActiveX插件时object显示问题,div被object标签遮挡的解决方案

浏览器中object显示问题

  • 起因
  • 解决方案
    • 方法一: 直接设置属性值
    • 方法二:iframe
  • 结论

起因

设计要求视频控制面板显示在视频界面上,如下图红框内所示。但是因为object不在文档流之中,所以不论别的元素设置z-index多高,都只会被object元素遮住而无法看到。
object元素代码如下

<object
  id="EZUIKit"
  width="400"
  height="400"
  border="0"
  name="EZUIKit">
</object>

使用ActiveX插件时object显示问题,div被object标签遮挡的解决方案_第1张图片

解决方案

方法一: 直接设置属性值

在代码中增加属性

	value="transparent"
<object
   id="EZUIKit"
   width="400"
   height="400"
   border="0"
   value="transparent"
   name="EZUIKit">
 </object>

在谷歌等浏览器中有效,但是IE中无效,因为需要activeX插件支持,必须兼容IE,所以此方法不适用,尝试第二种方法

方法二:iframe

iframe 元素会创建包含另外一个文档的内联框架,所以将object元素或者要放置在object上的元素包含在iframe中,可以做到高于object元素显示,我选择的是后者,将需要显示在视频上的内容嵌入iframe中的页面

<iframe>
	需要显示在object上的标签内容
</iframe>

确实可以显示在object元素之上,但是却不透明。如下图,会一整块遮挡住下面的视频内容。
在这里插入图片描述
设置属性allowtransparency="true"后在谷歌浏览器中会透明,可以显示下面的视频,但IE中无效,所以需要继续尝试。

<iframe allowtransparency="true">
</iframe>

设置iframe的背景色透明

<iframe allowtransparency="true" style="background-color: transparent">
</iframe>

设置后iframe背景透明,但是却无视了中间的object,穿透了object,直接显示的是iframe所在的父元素背景色,即使将iframe父元素设置透明也无用,会继续显示父元素的父元素背景色,无法显示该区域遮挡住的视频内容。

结论

IE中无法做到div元素显示在上并背景色透明的效果,谷歌可以实现,IE建议除非需要整块遮挡下面的视频而不需要透明,否则将需要放置在object上的元素移出来,与object互不干涉。

你可能感兴趣的:(前端)