最近總結的11條兼容瀏覽器問題

時間 2019-11-11

標籤最近總結兼容瀏覽器問題欄目瀏覽器简体版

原文原文鏈接

1 padding-top 高度計算方式不一樣 IE不加高度，Firefox等加高度css

解決方案：瀏覽器

height:345px; //此行爲firefox可識別高度。app

*height:427px //爲IE可識別高度。dom

2 Div text-align：center 在firefox中無效問題函數

解決方案：
this

使用margin: auto;代替。url

3 IE和firefox對於中止事件冒泡的處理方式不一樣spa

解決方案：firefox

function stopPop(obj,evt) { //中止事件冒泡，兼容IE及firefoxprototype

var e=(evt)?evt:window.event;

if (window.event) {

e.cancelBubble=true;

} else {

e.stopPropagation();

}

在須要中止冒泡的地方調用： stopPop(this,event)

4 firefox不支持insertAdjacentElement方法

解決方案：

改寫默認insertAdjacentElement方法，傳遞3個參數

function insertAdjacentElementSuper(obj,where,parsedNode){

switch(where){

case "beforeBegin":

obj.parentNode.insertBefore(parsedNode,obj);

break;

case "afterBegin":

obj.insertBefore(parsedNode,obj.firstChild);

break;

case "beforeEnd":

obj.appendChild(parsedNode);

break;

case "afterEnd":

if(obj.nextSibling)

obj.parentNode.insertBefore (parsedNode,obj.nextSibling);

else

obj.parentNode.appendChild (parsedNode);

break;

}

調用方式：insertAdjacentElementSuper(ifraBody,"beforeEnd",ifraDiv);

注意：obj.appendChild(parsedNode); 中 obj和parsedNode對象必須是在同一個窗口對象中建立的，例如obj建立於：

var ifraBody = top.mainFrm.document.getElementsByTagName_r("body").item(0);

則parsedNode對象必須建立於：

var ifraDiv=top.mainFrm.document.createElement("div");

而不能採用：

var ifraDiv= document.createElement("div");

----------------------

或者從新改寫此方法：

/************************************

*重寫insertAdjacentElement()方法（由於firefox中沒有該方法）

*而後全部瀏覽器均可以使用此方法了。

*這個擴充可能會影響到原始函數細節。

************************************/

if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){

alert('這是ff，從新定義了函數insertAdjacentElement');

HTMLElement.prototype.insertAdjacentElement=function(where,parsedNode){

switch(where){

case "beforeBegin":

this.parentNode.insertBefore(parsedNode,this);

break;

case "afterBegin":

this.insertBefore(parsedNode,this.firstChild);

break;

case "beforeEnd":

this.appendChild(parsedNode);

break;

case "afterEnd":

if(this.nextSibling)

this.parentNode.insertBefore(parsedNode,this.nextSibling);

else

this.parentNode.appendChild(parsedNode);

break;

}

/************************************

*重寫insertAdjacentElement()方法結束。

************************************/

5 firefox不支持\轉義操做

解決方式：

將字符轉義語句，例如: aMenuHtml+="<table width="100%" height="100%" ";

改成：

aMenuHtml+="<table width= '100%' height='100%' ";

6 firefox 與IE按鍵事件響應方式不一樣的處理

解決方式：

function loginSys(e){

e = e || window.event;

var code = e.keyCode || e.which;

if(code == 13){

validateSubmit()

}

調用方法： loginSys(event)

7 IE6 png背景圖片沒法平鋪的問題

解決方法：

使用純色背景png圖片拉伸代替圖片平鋪。

即 sizingMethod='scale'

例如：

background: url(../images/skin1/main/mainbg.png) repeat !important;

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled='bEnabled' , sizingMethod='scale' , src='images/skin1/main/mainbg.png' );

*background:none;

8 動態生成iframe設置背景及邊框無效的問題

解決方法：

動態生成iframe設置的參數在輸出爲dom對象時會自動改成大寫字母。故須要保持大小寫。

錯誤方法：

ifraSelf.setAttribute("frameborder", "0");

ifraSelf.setAttribute('allowtransparency','true');

正確方法：加入一個參數能夠保持大小寫不變

ifraSelf.setAttribute("frameborder", "0", 0);

ifraSelf.setAttribute('allowtransparency','true',0);

9 IE png背景透明層遇overflow後之上連接無效問題

解決方法：

把內容從png背景透明層中提取出來，再使用絕對定位定位位置。

連接無效代碼：

</div>

</body>

其中class：portalBg包含png透明樣式：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled='bEnabled' , sizingMethod='scale' , src='images/skin1/main/bottomBg.png' );

正確方法：

</body>

10 Obj.removeNode()在firefox下不支持

解決方法：

將原obj.removeNode()方法改成：

object.parentNode.removeChild(object)

11 IE6和IE7 對於margin-left解析數值不一樣的問題

解決方法：

在css中添加display:inline;

----

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。