最近总结的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;

----