整治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);
}
第三步中,頁面上有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);
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.