整治javascript--IE、firefox篇

1.select z-index的div IE下面zorder的問題
第三步中,頁面上有select標籤(飾品),如果有新的div,比如“使用幫助”、“預覽”thickbox,新的彈出div是基於z-index很大,實現效果,但是在ie會出現問題。因爲select不會藏在z-index高於他的div下面,所以實現方案:
var useScrewedZOderHack = false;
if(BrowserDetect.browser == "Explorer") {
    useScrewedZOderHack = true;
}
function doZOrderHack() {
    if(!useScrewedZOderHack) {
        return;
    }
    hHiddenFormElements = [];
    var selects = document.getElementsByTagName("select");
    for(var i=0;i<selects.length;i++) {
        var sel = selects[i];
        if(sel.style.display != 'none') {
            hHiddenFormElements.push(sel);
            sel.style.display = 'none';
        }
    }
}
function rollbackZOrderHack() {
    if(!useScrewedZOderHack) {
        return;
    }
    for(var i=0;i<hHiddenFormElements.length;i++) {
        var sel = hHiddenFormElements[i];
        sel.style.display = '';
    }
}
BrowserDetect.js:http://www.quirksmode.org/js/detect.html

2.透明背景png圖片在ff下面正常,ie下面不正常的問題
ff能正確顯示帶Alpha通道的PNG圖片. 後來才發現其實IE也可以做到.
IE5.5的濾鏡 progid:DXImageTransform.Microsoft.AlphaImageLoader(src=圖片地址, sizingmethod=scale) 可以用來讀取透明的PNG圖象.
var useAlphaHack = false;
if((BrowserDetect.browser == "Explorer")&&(BrowserDetect.version < 7.0)&&(BrowserDetect.version >= 5.5)) {
    useAlphaHack = true;
}

3.屬性overflow的問題
for some reason the border width gets included in the offset when overflow=hidden
overflow 標籤
  參考語法:
  overflow : visible | auto | hidden | scroll
  參數:
  visible :  不剪切內容也不添加滾動條。假如顯式聲明此默認值,對象將被剪切爲包含對象的window或frame的大小。並且clip屬性設置將失效
  auto :  此爲body對象和textarea的默認值。在需要時剪切內容並添加滾動條
  hidden :  不顯示超過對象尺寸的內容
  scroll :  總是顯示滾動條

var overflowHack = true;
/*
if((BrowserDetect.browser == "Explorer")&&(BrowserDetect.version < 7.0)&&(BrowserDetect.version >= 5.5)) {
    overflowHack = false;
}
*/
recalibrateCanvas: function() {
        var _this = this;
        window.setTimeout( function() {
                //var pos = Position.cumulativeOffset(_this.canvas);
                var pos = Position.cumulativeOffset(_this.sb.editorPane);
                if(overflowHack) {
                    _this.canvas_x = pos[0] + 5;
                    _this.canvas_y = pos[1] + 5;
                } else {
                    _this.canvas_x = pos[0];
                    _this.canvas_y = pos[1];
                }
                _this.repositionManagePanel();
                //reposition all the bling...
                for(key in _this.bling) {
                    if(_this.bling[key]!=null) {
                        _this.bling[key].setSize();
                    }
                }
                
        }, 100);
        
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章