Firefox与IE兼容性问题及解决方案

在java开发多语言网站的过程中，大量的代码可以正常运行，在FF被发现，但不是在伊江，反之亦然，不合与IE和火狐（Firefox）统一在Javaｓｃｒｉｐｔ如下：

1。兼容Firefox的outerHTML，FF没有outerHTML方法
复制代码代码如下所示：
如果（窗口。HtmlElement）{
HtmlElement。原型。__definesetter__ outerHTML （
VAR r = this.ownerdocument.createrange（）；
R.setStartBefore（本）；
VaR DF = r.createcontextualfragment（shtml）；
this.parentnode.replacechild（DF，这个）；
返回一个；
}）；

HtmlElement。原型。__definegetter__ outerHTML （
var属性；
var属性= this.attributes；
var str =<+ this.tagname.tolowercase（）；
对于（var i = 0；i ；
返回字符+>+这.innerHTML + ；
}）；

HtmlElement。原型。__definegetter__（canhavechildren
开关（this.tagname.tolowercase（））{
案例区域：
案例基：
案例基本字形：
情况：
案例框架：
案例HR：
案例IMG：
情况：
案例输入：
案例isindex ：
案例链接：
案例元：
案例参数：
返回false；
}
返回true；
}）；
}

2。设置类对象问题

描述：IE，您可以使用（或）{ }获得对象集合；Firefox只能使用{获取集合类对象。解决方案：统一使用{ }获取集合对象。

三.自定义属性问题

描述：在IE的领导下，你可以通过有规律的属性的方式得到的自定义属性，或者你可以使用getAttribute（）获取自定义属性。在Firefox中，你只能使用getAttribute（）获取自定义属性。解决的办法是让自定义属性一致通过getAttribute（）。

4.eval（idname ）的问题

描述：例如，你可以使用eval（idname ）或getElementById（idname ）获得ID idname HTML对象；Firefox只能使用getElementById（idname ）获得idname HTML对象ID。解决方案：使用getElementById（idname ）的idname HTML对象ID。

同一个5的问题。变量名称作为HTML对象标识

描述：在IE下，HTML对象的ID可以直接用作文档的从属对象变量名。在火狐，火狐不能用。。Firefox，可以使用相同的变量名为id的对象ID，但不是在IE的解决方案：使用document.getelementbyid（idname ）而不是文件。idname，最好不要把HTML对象ID相同的名字来减少错误。在声明变量时，添加VaR以避免歧义。

6.const问题

说明：在Firefox下，可以使用const关键字或var关键字来定义常量。IE只能使用var关键字来定义常量。解决方案是使用var关键字来定义常量。

7.input.type属性问题

描述：该input.type属性是只读的IE下；但input.type属性读写下的火狐。

8.window.event问题

描述：window.event只能运行在IE而不是运行在火狐浏览器，因为火狐的事件只能用在活动现场。

IE：

…

功能gotosubmit8_1（）{
…
警报（窗口。事件）； / /使用window.event
…
}

IEFirefox：

…

功能gotosubmit8_2（EVT）{
…
EVT = evtevt：（窗口。eventwindow。事件：空）；
警报（EVT）； / /使用EVT
…
}
9、事件x和事件y问题

说明：IE下，即使对象的X和Y属性，但没有pagex和pagey属性。在Firefox中，甚至有pagex pagey对象和属性，但没有X和X属性。

10.event.srcelement问题

描述：即，即使对象有一个srcelement财产，但没有目标属性；Firefox，即使对象有一个属性，但没有srcelement属性。解决方法：对象的使用（obj = event.srcelement：event.target；事件。srcelement）代替IE或Firefox event.target event.srcelement。

11.window.location.href问题

描述：IE或在Firefox2.0。X，你可以用window.location或window.location.href；firefox1.5。X只能用window.location。解决方案：而不是窗口window.location。位置。href ..

12。模态和非模态窗口的问题

说明：IE下，模态对话框和非模态窗口可以通过showModalDialog和showmodelessdialog打开。火狐无法解决这个问题。解决的办法是使用window.open（pageurl、名称、参数）直接打开新窗口。

如果你需要在子窗口中的参数传递给父窗口，您可以使用window.opener在子窗口的父窗口。例如，VAR Parwin = window.opener；parwin.document.getelementbyid（价值=阿青阿青）。

13.frame问题

以下面的框架为例：
（1）访问帧对象：即使用window.frameid或window.framename访问框架对象。火狐：只能使用window.framename访问框架对象。此外，IE和Firefox可以用于window.document.getelementbyid（frameid ）访问框架对象。

（2）开关的框架内容：伊江和火狐浏览器，你可以使用window.document.getelementbyid（testframe），。src= xxx.html或window.framename.location = xxx.html切换帧的内容。

如果你需要在框架回到父窗口返回的参数，你可以使用父在父窗口框架的访问。例如，父母。文件。1。文件名。值=阿青；

14。查找问题

采取以下getelementbyclass为例：

Document.getElementByClass（classname1 ）；这个函数是不工作下即可

getelementsbyclassname代用品，但这个函数返回匹配列表而不是一个单一的对象，如：
复制代码代码如下所示：
var列表索引；
列表= document.getelementsbyclassname（classname1 ）；
为（指数= 0；指数小于list.length；+ +指数）{
表{指数}。setAttribute（ / *…**；
}

这样的问题，最好是使用与所有浏览器兼容的类库，如jQuery、原型、谷歌闭包等。这样可以节省很多时间来处理这些兼容性问题。

例如，在jQuery中：

$（。home1）。Attr（ / *…**；

15.body问题

Firefox的身体存在于身体标签被浏览器完全读取之前，IE只有在身体标签完全被浏览器读取后才存在。

例如:

Firefox：
复制代码代码如下所示：
document.body.onclick =功能（EVT）{
极值理论EVT window.event | | =；
警报（EVT）；
}
IEFirefox：
document.body.onclick =功能（EVT）{
极值理论EVT window.event | | =；
警报（EVT）；
}

事件委托方法

即：document.body.onload =注入； / /功能注入（）已实现在这之前

火狐：document.body.onload =注入（）；

有人说标准是：

文件。身体。onload =新功能（'inject（）'）；

Firefox和IE的父元素之间的差异（parentelement）

即：obj.parentelement火狐：obj.parentnode

解决方案：由于Firefox和IE支持DOM，它是用obj.parentnode不错的选择。

17光标：手与光标：指针

Firefox不支持手动，但IE支持指针。

解决方案：统一使用指针

18.innertext正常工作在伊江，但不是在Firefox innerText。

Resolvent：
复制代码代码如下所示：
如果（navigator.appname.indexof（资源管理器）> 1）{

document.getelementbyid（'element）。innerText =我的短信；

别的{ }

document.getelementbyid（'element）。内容=我的短信；

}

这样的陈述obj.style.height = imgobj.height Firefox无效

uff1a解

obj.style.height = imgobj.height + 'px；

IE、Firefox和其他浏览器对表标记的操作方式不同。即不允许转让innerHTML表和TR appendchile也无用时，是JS加TR.

uff1a解
复制代码代码如下所示：
向表中添加空行：
无功行= otable.insertrow（- 1）；
VaR细胞= document.createelement（TD）；
cell.innerhtml = ；
cell.classname =XXXX；
row.appendchild（细胞）；

填充问题

填充5px 4px 3px 1px Firefox无法解释的速记，

它必须改变填充上：5px；填充右：4px；座垫：3px；填充左：1px；

消除对UL、OL等的缩进

风格应该写为：列表样式：无；缘：0px；padding: 0px；

边距属性对IE有效，填充属性对Firefox有效。

CSS透明度

即：过滤器：ProgID：DXImageTransform.Microsoft.Alpha（风格= 0，不透明度60）。

不透明度：0.6。

CSS圆角

ie：不支持圆角。

FF：-moz边界半径像素，或-moz边界半径上：4px；-moz边界半径右上：4px；-moz边界半径bottomleft：4px；-moz边界半径-右下：4px；

双线凹凸边界

即：边境：2px开始；

FF：
颜色：# -moz边境上d4d0c8白；
-moz左边框颜色：白色# d4d0c8；
正确的颜色：# -moz边境404040 # 808080；
-moz底部边框颜色：# 404040 # 808080

结语：

这样的问题，最好是使用与所有浏览器兼容的类库，如jQuery、原型、谷歌闭包等。这样可以节省很多时间来处理这些兼容性问题。