因为FireFox和IE的高度计算方式不同,所以导致了SWFObject嵌入SWF文件时的某些问题。
这两天就遇到了奇怪的问题,在嵌入SWF的时候将高度设置为100%的时候,IE显示正常,FF下愣是不显示,搜索了一下发现官网的第一条就是关于这个问题的(SWFObject Wiki FAQ)。官网的建议是这样的:
<style type="text/css" media="screen">
html, body, #containera, #containerb { height:100%; }
body { margin:0; padding:0; overflow:hidden; }
</style>
不过这种灵活性比较低。我现在遇到的情况是这样的,布局分三块:
第一块:头部和导航栏
第二块:主内容
第三块:底部
第一块和底部的高度的确定的,分别为120px和80px。主内容块的高度为整个可视区域减去120px+80px;
因此就需要对SWFObject推荐的嵌入代码作如下修改:
<script type="text/javascript">
var flashvars = {};
var params = {
menu: "false",
scale: "noScale",
bgcolor: "#FFFFFF"
};
window.onresize = function() {
document.getElementById("altContent").height = document.body.clientHeight – 160;
}
swfobject.embedSWF("AlbumManager.swf", "altContent", "100%", document.body.clientHeight – 160, "9.0.0", "expressInstall.swf", flashvars, params);
</script>
也就是说使用JavaScript模拟了“100% ”。