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 [email protected]
 * 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('width:', 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