在网页中插入flash文件,会出现遮挡div的问题。
我把导航条属性设置为 fixed,这样往下拉浏览器滚动条时,网页body部分网上移动,但是导航条不动。当body部分有swf文件时,flash部分会遮挡导航条,这样导航条就插在了body和flash之间。问题如图:
在IE6及以前的浏览器中出现问题,但在高版本的IE及chrome、firefox中正常。据查是IE的bug。
设置 z-index 属性无法解决问题。
在flash的 object标签 属性中添加 <param name="wmode" value="transparent">,在embed标签中添加参数wmode=‘transparent’,问题解决了。
还有一个页面使用了flaxpaper,也出现了该问题。我引用的是flexpaper_flash.js这个js文件。打开粗读其代码,找到:
/**
*
* FlexPaper embedding functionality. Based on FlashEmbed
*
*/
(function() {
var IE = document.all,
URL = 'http://www.adobe.com/go/getflashplayer',
JQUERY = typeof jQuery == 'function',
RE = /(\d+)[^\d]+(\d+)[^\d]*(\d*)/,
GLOBAL_OPTS = {
// very common opts
width: '100%',
height: '100%',
wmode:'transparent',//添加此行代码,使得flash不遮挡其它div by @wind908
id: "_" + ("" + Math.random()).slice(9),
// flashembed defaults
allowfullscreen: true,
allowscriptaccess: 'always',
quality: 'high',
// flashembed specific options
version: [3, 0],
onFail: null,
expressInstall: null,
w3c: false,
cachebusting: false
};
// version 9 bugfix: (http://blog.deconcept.com/2006/07/28/swfobject-143-released/)
部分,参照上下文,添加了一个参数wmode:'transparent',问题解决。