论坛首页 Web前端技术论坛

解决FF&IE浏览器下DIV下拉菜单被视频挡住的方法

浏览 4051 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-02-23  

今天工作的时候,遇到一个客户需要修改的问题:DIV下拉菜单被视频挡住。

我想在做网页前台的时候,很多朋友都会遇到这样的问题:

1.        Div层被flash挡住。

2.        Div层被Select挡住。

3.        Div层被视频文件挡住。

前两个问题,有很容易的方法去解决,在这里我就不讲解了。第三个问题,是个很麻烦的事情,接到这个修改后,当时就觉得情况不乐观,会花掉不少的时间。

在网上找了很多资料,最常见的是说用iframe来解决;也许是我的方法不对吧,我在测试的时候用<iframe src="包含视频的静态页"....></iframe>也无法达到效果,Div层依然会被挡住。

怎么解决呢?呵呵,不卖关子了,将代码放在下面,希望能给大家一个参考:


<div
style="position: relative; width: *; height: *; overflow:hidden;">

  <embed  src="视频文件地址" width="*" height="*" WindowlessVideo="1"></embed>

</div>

 

首先: WindowlessVideo="1",这个很重要,这个参数的具体意思,大家可以在网上找参考资料,这里我不详述了。通过增加这个参数,在IE系列的浏览器下,都可以让Div层正常的显示在视频文件上方了。

 

其次:style="position: relative; width: *; height: *; overflow:hidden;",为什么要增加这一个呢?其实我也不知道为什么要加这个,当初在IE下测试成功的时候,发现在FF下会再现两个视频画面,一个是动的,而另一个是静止的,而静止的画面会随着下拉菜单的切换而变化(有点类似PrintScreen的感觉)。在FF下可以充分理解WindowlessVideo是什么意思了。所以,我就萌发了用div来包含<embed...></embed>,再给他一个相对定位(绝对定位我没测试),然后保险起见,顺便定义了宽度、高度及溢出(是否必要,没经测试)。

 

测试:OK,事情就这样解决了。希望对大家的工作有点小小的帮助。

   发表时间:2011-02-24  
2.  Div层被Select挡住。
  这个问题你是怎么处理的呢? 我以前是通过visibility 来控制的,你还有什么高见吗,除了重写select哈?等待你的高见。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics