flash wmode="window&qu…
来源:互联网 发布:node.js web开发实战 编辑:程序博客网 时间:2024/06/07 16:09
引用一段话:opaque和tranparent由于都是无窗口内渲染模式,能很好的实现各层的遮挡,和一般div元素没有太大区别,而window、direct模式在现在看来,是没有任何办法实现被DHTML元素完美遮挡的,其中一个比较折中的方法就是使用iframe。方法就是为要覆盖在flash元素上的div层准备一个空的iframe,当需要展现这个div时,将iframe移到flash元素的上方,并将大小、位置调整为div的大小和位置,然后通过设置position和z-index让div覆盖在iframe的上方,目前看到优酷、迅雷看看、乐视的播放页对顶部的导航栏有做这样的处理。其原理就是利用iframe在展现的时候(当页面滚动和其他操作时,会导致flash元素重新覆盖iframe@_@)可以覆盖在flash元素上。
原文:http://www.cnblogs.com/_franky/archive/2010/11/19/1882055.html
flashwmode="window" 时的遮挡问题.
在本文开始前 ,我先引入,摸同学的文档. 来说明一些问题.然后我在此基础上,会做一些扩展说明.
文档地址: http://www.w3help.org/zh-cn/causes/RX8012.
基于以上的认识,我们开始接下来的话题...
我们所要解决的是这样一种需求: 当我们现在有一个很大滴 flash 在页面上,且wmode 必须为window的前提下...如何使我们的一些元素不被flash遮挡的呢?
遗憾的是,我所能给出的答案是 . 并不完美.我仍然无法搞定 opera 和 safari 两款浏览器. 那么此文希望可以起到抛砖引玉的作用吧.
其实答案很简单. 在展示元素下面、flash上面放一个iframe.
一个最佳实现方式是:
z-index:-1;position:absolute;top:0;left:0;border:0">
把这样的一个iframe 按照你喜欢的方式放入元素中.(应该是该元素直系子节点.)其中 width height 为元素宽高.重要属性z-index:-1.是我们的救星.
当然,最后别忘了加个透明度 0..否则ie下很郁闷.
好吧中心思想就是这个.但是,这个办法并不是所有浏览器都有效. 并且,各个浏览器总会有这样或那样的bug存在:
严重问题:
Safari :无效.
Opera :无效.
FireFox 3.6及 4.0 beta : 无效.
FireFox 3.5 及之前版本 . 元素position : fixed 以外的值. 无效.(即必须当节点的position:fixed时,才ok )
幸运的是对于FireFox3.6 及4.0beta 我们已经无需借助iframe来修复.只需要给元素简单设置一个background非 transparent 的值即可.
要注意的是,如果background是一个image 那么,如果image 有透明部分,则任然会有问题.
FireFox 3.6及 4.0 beta : 当使用background 修正时,如果这个修正仅针对元素内部的表格元素的空td 则无效.(解决办法给td : display:block,或想办法让td具备一个有效的宽高).
对于 FireFox3.5 及之前版本,首先我建议放弃修复,如果非要修复.则只好使用position:fixed,再配合中间的iframe,然后通过一系列js修补其行为.让他看起来是正常的.
一些小问题:
IE6-IE9beta :在flash与当前窗口上其他元素 切换焦点时, 元素会被flash遮挡.
IE7: 当 元素为position:fixed时,滚动条滚动后.元素会被flash遮挡.
搜狗高速浏览器2.1及之前的版本,webkit内核下: 当元素位置发生改变时.会保留一个残影.(残影数一般只有一个,由于中间的iframe造成)
以上小问题.都可以通过触发RenderTree 全局 Reflow 修复. 除了QQ
考虑下面的代码:
border属性和值是随意的.只要你能引起全局的reflow 并且视觉上无影响.如何做都是可以的.. 比如ie下可以用.body.style.zoom.
你甚至可以不实用offsetWidth,在1、0之间切换 zoom,就可以直接造成reflow... 读取body.offsetWidth.可以绕过.浏览器对uiupdate 队列的优化.
其实 代码仍然不够严谨. 因为原始的boreder 很可能 影响reflow的 borderWidth 受css样式影响,即原来就是1px,那么上面的代码,很可能只会触发repaint,而不是我们期望的reflow. 具体情境需要大家根据实际情况来做了.
棘手的小问题:
QQ5 浏览器 webkit 内核下: 当元素位置发生改变时,产生残影造成花屏的现象.
此问题,全局reflow可以改善花屏效果.但连续移动中.视觉上更多的感觉是.元素被flash遮盖住了.直到元素停止移动.
搜狗高速浏览器2.1及之前的版本,webkit内核下: 当元素所处平面位置在flash外边时,而此时元素内部某子元素通过定位调整. 与flash在平面上有交集时,交集部分会被flash遮盖.
此问题.需要修改元素DOM结构来解决.暂时也无甚好的方法.
所有使用.chromium开源项目的 webkit内核的浏览器如:Chrome全系,maxthon3、搜狗高速浏览器、QQ5浏览器、360高速浏览器.下
使用iframe修复遮盖后. 动态修改元素.style.clip 时. 由于元素可视区域变化.而造成的 iframe残留阴影问题(此阴影与flash下面的背景同色).
应避免使用clip属性.以避免此bug的出现.
所有chrome8+的webkit内核浏览器共有的渲染bug.当用来遮罩的iframe的z-index为-1(即使其父节点也是绝对定位,且具备非常高的z-index).的情况,如果页面中某一个flash(wmode==window),采用绝对定位(除非其父节点也为绝对定位,即flash没有脱离布局流).则会造成iframe遮罩层是去作用,被浏览器处理为x层级在flash之下了..更加怪异的是,其中任何一个flash采用绝对定位,其他flash也会受影响.
解决办法:
好了 到了结束的时候了..
列出毛病最少的几个浏览器 也就是基本不需要使用 reflow的浏览器
chrome maxthon3 搜狗高速浏览器2.2 FF3.6 + 以及使用比较新的chromium 开源项目所提供内核的浏览器 比如 360 高速浏览器 以及 等等所谓高速浏览器的 国产山寨货们.
其中比较难搞的浏览器是搜狗2.2 和之前版本的 webkit判断.. 当然userAgent是有区别.我仍然给出一个基于特性的检测方法:
好吧,代码很悲剧.我不得不承认这一点.
0 0
- flash wmode="window&qu…
- spring scope="prototype"&nb…
- yum groupinstall &quot…
- <input type="file&q…
- jQuery .attr("checked&…
- "ORA-01086: savepoint&…
- 解决VS 2008中MessageBox(&qu…
- The string &quot…
- High "Library Cache&nb…
- WIN7下无法使用sqlplus &quot…
- 【原创】 Window 7&nbsp…
- [原]silktest "Window cannot be s…
- Flash Builder 4.7使用&…
- Window 2003 Server&nbs…
- 利用link标签rel="alternate&…
- linux shell 中"2>&1"含义
- identifier "tBoolean" is undefie…
- <meta http-equiv="Refresh" conte…
- 关闭浏览器触发事件
- Jquery关闭离开页面时提醒
- android mtk 建一个设备misc
- jquery.cookie使用方法
- wamp配置虚拟主机
- flash wmode="window&qu…
- 素月流天
- PHP计算2点经纬度之间的距离
- jquery操作iframe中的js函数
- R本月小总结,容易忘记的东西
- SWFObject2.0
- DB2 错误代号 笔记
- 【Android布局】在程序中设置android:gravity 和 android:layout_Gravity属性 .
- 年轻人买房的问题