Flash对象插入到网页中的3px问题

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

公司里有很多网页游戏，之前是项目多，抄来抄去，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属性为空

 

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

/**
 * Author zhangyi@bojoy.net
 * Version V1.0
 */

var BOJOY_Resize = function() {
    var inner;
    var _eventList = [];

    function bindReady(handler) {
        var isReady = false;

        function ready() {
            if (isReady) return;
            isReady = true;
            handler();            
        }

        if (document.addEventListener) {//native event
            document.addEventListener("DOMContentLoaded", function() {
                document.removeEventListener("DOMContentLoaded", arguments.callee, false);
                ready();
            }, false);
        } else if (document.attachEvent) {//IE
            //iframe
            document.attachEvent("onreadystatechange", function () {
                if (document.readyState === "complete") {
                    document.detachEvent("onreadystatechange", arguments.callee);
                    ready();
                }
            });
            
            if (document.documentElement.doScroll && typeof window.frameElement === "undefined") {
                (function () {
                    if (isReady) return;
                    try {
                        // If IE is used, use the trick by Diego Perini
                        // http://javascript.nwbox.com/IEContentLoaded/
                        document.documentElement.doScroll("left");
                    } catch (error) {
                        setTimeout(arguments.callee, 0);
                        return;
                    }
                    // and execute any waiting functions
                    ready();
                })();
            }
        }

            // Old browsers
        if (window.addEventListener) {
            window.addEventListener('load', ready, false);
        } else if (window.attachEvent) {
            window.attachEvent('onload', ready);
        } else {
            var fn = window.onload // very old browser, copy old onload
            window.onload = function() { // replace by new onload and call the old one
                fn && fn()
                ready()
            }
        }
    }

    bindReady(function() {
        while (_eventList.length) {
            var fn = _eventList.shift();
            fn && fn();
        }
    });

    function bindEvent(elem, type, fn) {
        type = type.replace(/^on/, '');
        
        if (elem.addEventListener) {
            elem.addEventListener(type, fn, false);    
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, fn);
        }
    }

    function unBindEvent(elem, type, fn) {
        type = type.replace(/^on/, '');

        if (elem.removeEventListener) {
            elem.removeEventListener(type, fn, false);    
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, fn);
        }
    }

    function getElem(id) {
        return typeof id === 'string' ? document.getElementById(id) : id;
    }
    
       return inner = {
        domReady : function(fn) {
            _eventList.push(fn);
        },
        getEl : getElem,
        bind : function(id, type, fn) {
            var elem = getElem(id);

            bindEvent(elem, type, fn);
        },
        unBind : function(id, type, fn) {
            var elem = getElem(id); 

            unBindEvent(elem, type, fn);
        },
        init : function(id, minWidth, minHeight, extraWidth, extraHeight, autoScroll) {
            if (!inner.getEl(id)) {                
                return ;
            }

            minWidth = minWidth || 1000;
            minHeight = minHeight || 600;
            extraWidth = extraWidth || 0;
            extraHeight = extraHeight || 0;

            if (typeof(autoScroll) != 'boolean') {
                autoScroll = true;
            }
                
            var delayTimer = null;
            
            function adjustSize() {
                var elem = inner.getEl(id);
                elem.style.display = 'block';

                var ua = navigator.userAgent.toLowerCase();
                var isStrict = document.compatMode == "CSS1Compat";
                var isOpera = /opera/.test(ua);
                var isIE = !isOpera && /msie/.test(ua);

                var winWidth = 0, winHeight = 0;

                if (!isStrict && !isOpera) {
                    winWidth = document.body.clientWidth;
                } else if (isIE) {
                    winWidth = document.documentElement.clientWidth;
                } else {
                    winWidth = window.innerWidth;
                }
                
                if (isIE) {
                    winHeight = isStrict ? document.documentElement.clientHeight : document.body.clientHeight;
                } else {
                    winHeight = window.innerHeight;
                }
                
                
                window.console && window.console.log('isStrict:', isStrict);
                window.console && window.console.log('winWidth:', winWidth);
                window.console && window.console.log('winHeight:', winHeight);
                
                var w = winWidth - extraWidth;
                var h = winHeight - extraHeight;

                if (autoScroll) {
                    w = Math.max(minWidth, w);
                    h = Math.max(minHeight, h);
                }

                elem.style.height = h + 'px';
                elem.style.width = w + 'px';

                window.console && window.console.log('', w);
                window.console && window.console.log('height:', h);
            }

            function delayResize() {
                if (delayTimer != null) {
                    clearTimeout(delayTimer);
                    delayTimer = null;
                }

                delayTimer = setTimeout(function() {
                    adjustSize();
                }, 0);
            }

               inner.domReady(adjustSize);
            inner.bind(window, 'load', delayResize);
            inner.bind(window, '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