我记得我已经遇到过,不过今天又遇到了,而且浪费了大量的时候在上面,甚至怀疑自己写的脚本有问题,花了几乎一个下午来调试这个问题。最后发现是样式导致的…

公司里有很多网页游戏,之前是项目多,抄来抄去,JS代码有的是我写的,有的是其它同事直接从网上下载下来copy进去的,到处都是JQuery的$,我不太愿意看到一个页面为了获取DOM对象(getElementById)以及绑定事件来引用额外的脚本,同时也为了统一。网页游戏大多数都是全屏显示,浏览器可视区域有多大,它就全屏显示在里面,为了避免混乱,写了一个通用的脚本支持用户在缩放浏览器时,当可视区域小于指定的宽、高时出现滚动条(Chrome与IE表现一致)。

 

但当我拿到浏览器可视的宽、高时,对swf对象设定width、height时,神奇的滚动条就出现了,这不符合预期,抓狂…

然后排查问题,对界面所有的元素、样式都删除掉,然后再进行测试,还是有问题。而当我把获得到的可视区域的宽高均减去4px时就不会有滚动条了!!!但界面明显感觉就不对称了,后来找到问题了。

在网上找到二种解决方法:

1、设置swf对象的display属性,将其设置为block;

2、设置body的字体、行高为0,font-size:0;line-height:0;

第二种方法如果页面有文本节点就需要额外再设定字体及行高了,有点麻烦(不过页游界面一般比较简单,一般不太会有什么文字)

默认swf对象返回的display属性为空

 

最后附上相关的脚本代码,供有需要的同学参考:

'resize', delayResize);
}
}

}();

使用方法:

BOJOY_Resize.init(swfId, minWidth,  minHeight, 固定预留的宽度, 固定预留的高度, 是否需要显示滚动条-Boolean);

*固定预留的宽、高指的页面需要固定显示的内容,它们的宽、高,例如页面左侧有一个游戏攻略,顶部有一个全局提示消息等。上面的脚本支持iframe嵌套

 

参考链接:

2-3px space below Flash object in Firefox...

Font-size adds extra space when positioning text elements in Opera

Extra 2-3px below Flash object on Firefox

相关文章: