2011年3月29日
| <!–IE6下的left定位错误–> <div style="position:relative;border:1px solid orange;text-align:center;"> <a href="http://www.zzsky.cn">http://www.zzsky.cn</a> <div style="position:absolute;top:0;left:0;background:#CCC;">zzsky</div> </div> <!–IE6下的left定位错误–> <hr /> <div style="position:relative;border:1px solid orange;text-align:right;"> <a href="http://www.zzsky.cn">http://www.zzsky.cn</a> <div style="position:absolute;top:0;left:0;background:#CCC;">zzsky</div> </div> |
上面这段代码在IE6中定位错误。
解决办法有两种：
1、给父层设置zoom:1触发layout：
| <!–解决方法1 zoom:1–> <hr /> <div style="position:relative;border:1px solid orange;zoom:1;text-align:center;"> <a href="http://www.zzsky.cn">http://www.zzsky.cn</a> <div style="position:absolute;top:0;left:0;background:#CCC;">zzsky</div> </div> |
2、给父层设置宽度(width)：
| <!–解决方法2 设置width–> <hr /> <div style="position:relative;width:99%;border:1px solid orange;text-align:center;"> <a href="http://www.zzsky.cn">http://www.zzsky.cn</a> <div style="position:absolute;top:0;left:0;background:#CCC;">zzsky</div> </div> |
下面的这段代码在IE6下，bottom定位错误：
| <!–IE6下的bottom定位错误–> <hr /> <div style="position:relative;border:1px solid orange;text-align:center;"> <a href="http://www.zzsky.cn">http://www.zzsky.cn</a> <div style="position:absolute;bottom:0;left:0;background:#CCC;">zzsky</div> </div> |
解决办法和left定位类似：
方法1是给父层设置zoom触发layout：
| <!–解决方法1 zoom:1–> <hr /> <div style="position:relative;border:1px solid orange;zoom:1;text-align:center;"> <a href="http://www.zzsky.cn">http://www.zzsky.cn</a><br /> <a href="http://www.zzsky.cn">http://www.zzsky.cn</a> <div style="position:absolute;bottom:0;left:0;background:#CCC;">zzsky</div> |
</div>
方法2是给父层设置高度(height)：
| <!–解决方法2 设置height–> <hr /> <div style="position:relative;height:60px;border:1px solid orange;text-align:center;"> <a href="http://www.zzsky.cn">http://www.zzsky.cn</a> <div style="position:absolute;bottom:0;left:0;background:#CCC;">zzsky</div> </div> |
IE6中很多Bug都可以通过触发layout得到解决，以上的解决方法无论是设置zoom:1还是设置width和height其实都是为了触发layout。
下列的CSS属性或取值会让一个元素获得layout：
position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题；
float:left|right 由于layout元素的特性，浮动模型会有很多怪异的表现；
display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它，这也可能也是这个CSS属性的唯一效果—-让某个元素有layout；
width: 除auto外的任何值；
height: 除auto外的任何值；
zoom: 除auto外的任何值。
IE浏览器下可用
＜param name="wmode" value="transparent" />
firefox下可用
＜embed src="YourFlash.swf" wmode="transparent" ... >＜/embed>
关于wmode属性资料：
（可选）允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。
"Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。
"Opaque" 使应用程序隐藏页面上位于它后面的所有内容。
"Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。
"Opaque windowless"和"Transparent windowless"都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来，而"opaque"则不会显示。
很多时候，我们在页面插入FLASH的时候会发现，flash是object，然后页面默认把它始终是放在最上面的，这样flash上面紧贴着的下拉菜单便到后面看不到了。设置层也没有用。
这 样在生成页面的时候就变得很被动，于是我做了个浮动层，原来的页面上有flash，但是不论我把浮动层的z-index调多高，这个层都始终会被 flash遮住，无耐之下，只能把浮动层移动flash遮不到的地方～ 后来经过尝试，我发现在<object>里面插入<PARAM NAME=wmode VALUE=transparent>就行了，在这里还有一些补充资料需要说明一下。
<!-- 一个是 IE 中起作用的: -->
<param name="wmode" value="transparent" />
<!-- 另外一个是 firefox 中起作用: -->
<embed src="YourFlash.swf" wmode="transparent" ... ></embed>
我也试了在flash 加个参数，wmode=opaque，也是可以的，why？
看了这段解释，还是不明白～···················
（可选）允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。
"Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。
"Opaque" 使应用程序隐藏页面上位于它后面的所有内容。
"Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。
"Opaque windowless"和"Transparent windowless"都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来，而"opaque"则不会显示。
如果忽略此属性，默认值为 Window。仅适用于 object。
------------------------------------------------------------------------------
------------------------------------------------------------------------------
这是一个使得flash在页面上显示在最下面的参数
wmode=Opaque
这样修改，可以使得其他元素都可以覆盖在这个flash之上。
wmode的属性:
wmode=Window 在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。
wmode=Opaque 使应用程序隐藏页面上位于它后面的所有内容。
wmode=Transparent 使 HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。
"Opaque windowless"和"Transparent windowless"都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来，而"opaque"则不会显示。
| |
div的图层由div的style中的z-index来决定，z-index是层垂直屏幕的坐标，0最小，越大的话位置越靠上。
由于FusionCharts的图表都放在div中，如果页面还有其他的div，将被FusionCharts的图层挡住。不过设置z-index并不起作用，其他的div仍然被挡住。经过网络上查找，发现原来是这样的：
flash的图默认情况下总是位于最上层，参考下面的文档：
<param name="WMODE" value="transparent">
<param name="wmode" value="Opaque">
<param name="wmode" value="Window">
NOTE: 支持其它浏览器(firefox opera etc.) 则使用 <embed wmode="transparent" />在embed节点中加入wmode值.
window 模式
默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只 是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮 住位置与他重合的所有DHTML层。
但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。
Opaque 模式
这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。
Transparent 模式
透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。
了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。
所以只要将flash的wmode设置成opaque就行了。所以在页面加载FusionCharts图表时，修改参数wmode，在页面上加载flash的js代码中加上这句 chart.addParam("wmode","Opaque");就可以了