IE火狐兼容性问题

IE与Firefox兼容性问题一、脚本兼容性脚本语言要使用javascript，不要使用vbscript，因为vbs只有IE支持，火狐是不支持的关于获取form表单数据，国际通用的标准是根据id获得，但是IE也可以通过name获得，为了兼容性，还是选择id吧，另外，FF也不支持IE的document.all，要用通用的document.getElementById自定义属性问题说明：IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.解决方法：统一通过getAttribute()获取自定义属性.document.formName.item("itemName") 问题说明：IE下，可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下，只能使用document.formName.elements["elementName"].解决方法：统一使用document.formName.elements["elementName"].集合类对象问题说明：IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.解决方法：统一使用[]获取集合类对象.eval("idName")问题说明：IE下，可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.解决方法：统一用getElementById("idName")来取得id为idName的HTML对象.变量名与某HTML对象ID相同的问题说明：IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。

浏览器兼容新问题W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。

然而，这对开发者来说，是好事，也是坏事。

说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且，不同浏览器的扩展功能(例如 -moz，-webkit开头的样式)，对W3C标准也是个推进；说它是坏事，因为，多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。

这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。

我们把引起这些差异的问题统称为“浏览器兼容性问题”。

而正是这些“浏览器兼容性问题”，无形中给我们的开发增加了不少难度。

从浏览器内核的角度来看，浏览器兼容性问题可分为以下三类：1. 渲染相关：和样式相关的问题，即体现在布局效果上的问题。

2. 脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。

对于某些浏览器的功能方面的特性，也属于这一类。

3. 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

例如下面的页面，是一个渲染相关的问题：在各个浏览器中都表现的不同，这就属于兼容性问题。

造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。

现今常见的浏览器及其排版引擎（又称渲染引擎）及脚本引擎，如下：而造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出。

例如：不规则的嵌套：DIV 中直接嵌套 LI 元素是不合标准的，LI 应该处于 UL 内。

此类问题常见的还有 P 中嵌套 DIV， TABLE 等元素。

不规范的DOM接口和属性设置：上面代码中top的值，其实应该是一个字符串值，需有单位。

例如：35px。

总之，人为的原因也占很大一部分。

浏览器兼容性的解决方法随着互联网的不断发展，浏览器也得到了越来越多的重要性。

从最初的简单浏览功能到现在的多样化应用，浏览器正变得越来越重要。

但是，不同的浏览器有不同的协议和语言，可能会导致网页在不同的浏览器中显示不同的效果。

所以我们需要解决浏览器兼容性问题。

浏览器兼容性问题浏览器兼容性问题是在不同的浏览器中显示不一致的问题，有时候还会出现网页无法正常显示的问题。

这是因为每个浏览器都有各自的实现标准和处理方式，而网页制作人员通常只考虑一种浏览器，没有考虑到其他浏览器访问自己的网站，导致了这种兼容性问题。

实际上，在网站开发的过程中，应该优先考虑多种浏览器，尤其是Internet Explorer和Firefox在不同版本之间的差异。

这样才能让网站在不同的环境下，不同的浏览器和不同的操作系统下都能完美的运行。

解决浏览器兼容性问题虽然不同的浏览器有不同的实现标准，但是我们可以采用一些措施来解决这种浏览器兼容性问题。

1.使用标准的HTML/CSS/Javascript遵循HTML、CSS和JavaScript的标准，是解决浏览器兼容性问题的基础。

这样的编写方式通常可以使网站在大多数浏览器中运行良好。

如果您尝试按照标准编写只能在一种浏览器中工作的网页，那么它就不会在其他浏览器上工作良好。

所以，标准的HTML/CSS/Javascript是解决浏览器兼容性问题的关键。

2.使用CSS Reset在CSS Reset中，使用过CSS的开发者可能都有过这样的经历：每种浏览器都默认有自己的样式表文件，这就是为什么某些元素在设计页面时会出现各种奇怪的问题。

CSS Reset 的目的就是将所有浏览器的默认样式表重置，以达到统一的目的，从而减少浏览器兼容性问题。

3.使用BootstrapBootstrap是一个开源的前端框架，它包含众多基于HTML、CSS和JavaScript的组件，可以快速构建一个响应式、移动优先的网站。

网页设计如何解决兼容性问题网页〔制定〕如何解决兼容性问题firefox下div容器定义height后，div不会因为内容超出height而撑大，而i6e下是会被内容撑大，高度限定失效。

所以不要轻易给容器定义height。

下面介绍网页制定如何解决兼容性问题，希望对您有所帮助。

1. 文字大小不兼容同样14px的宋体字，ie下实际占高16px，下留白3px，firefox 下实际占高17px，上留白1px，下留白3px。

文字大小不兼容解决方案：给所有文字设定通用line-height 值2.div高度不兼容firefox下div容器定义height后，div不会因为内容超出height而撑大，而i6e下是会被内容撑大，高度限定失效。

所以不要轻易给容器定义height。

div高度不兼容解决方案：如果设置高度，必须要同时把内容物高度限定，也就是溢出隐藏处理：overflow:hidden;或者当必须要随着内容自适应高度，但又想div有一个最小的高度时候，像这样做min-height: 1400px;max-height:none;_height:1400px;3.div宽度不兼容如果div容器设定float浮动但没设定宽度，那么也会出现ie6和firefox的不兼容。

firefox下内容会撑开容器渗入它前面的div，ie6下该div内容折行而不是我们想象的与同级div在同一行。

div宽度不兼容解决方案：浮动div容器一般必须定义width。

4.div浮动不兼容当前面div有左浮动和右浮动，下面div就会受他们影响也有浮动。

ie或许不用加清除，但firefox下不清除浮动是不行的。

div浮动不兼容解决方案：给下面的div设定清除 clear:both;5. double-margin不兼容ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。

解决方案：给浮动容器定义display:inline。

JavaScript在IE和Firefox（⽕狐）的不兼容问题解决⽅法⼩结复制代码代码如下:if (window.HTMLElement) {HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {var r=this.ownerDocument.createRange();r.setStartBefore(this);var df=r.createContextualFragment(sHTML);this.parentNode.replaceChild(df,this);return sHTML;});HTMLElement.prototype.__defineGetter__("outerHTML",function() {var attr;var attrs=this.attributes;var str="<"+this.tagName.toLowerCase();for (var i=0;i<attrs.length;i++) {attr=attrs[i];if(attr.specified)str+=" "++'="'+attr.value+'"';}if(!this.canHaveChildren)return str+">";return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";});HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {switch(this.tagName.toLowerCase()) {case "area":case "base":case "basefont":case "col":case "frame":case "hr":case "img":case "br":case "input":case "isindex":case "link":case "meta":case "param":return false;}return true;});}说明:IE下,可以使⽤()或[]获取集合类对象;Firefox下,只能使⽤[]获取集合类对象.解决⽅法:统⼀使⽤[]获取集合类对象.说明:IE下,可以使⽤获取常规属性的⽅法来获取⾃定义属性,也可以使⽤getAttribute()获取⾃定义属性;Firefox下,只能使⽤getAttribute()获取⾃定义属性.解决⽅法:统⼀通过getAttribute()获取⾃定义属性.说明:IE下,,可以使⽤eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使⽤getElementById("idName")来取得id为idName的HTML对象.解决⽅法:统⼀⽤getElementById("idName")来取得id为idName的HTML对象.说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使⽤;Firefox下则不能.Firefox下,可以使⽤与HTML对象ID 相同的变量名;IE下则不能。

IE火狐浏览器兼容问题大全1.最简单的鼠标移过手变型的css要改了cursor:pointer;/*Firefox不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了，标准的是pointer2.Firefox不支持滤镜最常见的半透明不支持。

filter: Alpha(Opacity=50); /* for IE */opacity: .5;/* for Firefox */style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;"onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;this.filters.alpha.opacity=50"3.Firefox不支持expression 例如去掉链接的边框要分别写不同的cssa,area { blr:expression(this.onFocus=this.blur()) } /* for IE */:focus { outline: none; } /* for Firefox */4.Firefox不支持div滚动条的颜色设置，目前还没有找到替换的好方法。

.contendiv {position: absolute; left: 0px; top: 10px; width: 580px;height: 135px;line-height:120%;text-align:left; font-family:"宋体";word-break : break-all; color:#6D6E71; OVERFLOW-Y:auto;OVERFLOW-X:no;SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR:F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6 F6;SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;}这个在Firefox里面完全没有效果了。

前端框架技术中常见的浏览器兼容性问题及解决方案在前端开发过程中，浏览器兼容性问题一直是一个头疼的难题。

由于不同浏览器的渲染引擎和规范解释存在差异，导致同样的前端代码在不同浏览器上可能会呈现不同的效果甚至出现错误。

为了提供用户一致的体验，我们需要了解并解决常见的浏览器兼容性问题。

一、CSS兼容性问题1. 盒模型差异Chrome、Firefox以及Safari使用的是W3C标准的盒模型，而IE使用的是传统的IE盒模型。

解决方案是使用CSS的box-sizing属性来明确指定所使用的盒模型。

```box-sizing: border-box; /*使用W3C的盒模型*/box-sizing: content-box; /*使用传统的IE盒模型*/```2. 浮动清除在IE6及其以前的版本中，浮动元素没有被正确的清除，可能会导致父容器的高度无法自适应。

解决方案是使用clearfix类或者在父容器上添加clear属性。

```.clearfix::after {content: "";display: table;clear: both;}```3. 层叠样式兼容性不同浏览器的CSS样式的优先级计算存在差异，可能导致样式覆盖问题。

解决方案是合理使用选择器和样式优先级，避免出现覆盖问题。

二、JavaScript兼容性问题1. DOM操作差异不同浏览器对于DOM操作的实现存在差异，可能导致相同的DOM操作代码在不同浏览器上出现错误。

解决方案是使用现代的DOM操作API，如querySelector、addEventListener等，或者使用框架提供的封装方法。

2. 事件处理不同浏览器对于事件处理的实现存在差异，可能导致事件处理代码在不同浏览器上有兼容性问题。

解决方案是使用框架提供的事件处理方法，如jQuery的事件处理方法，或者使用addEventListener来注册事件。

3. AJAX兼容性不同浏览器对于XMLHttpRequest对象的实现存在差异，可能导致AJAX代码在不同浏览器上无法正常工作。

如何解决ie与⽕狐的兼容问题如何解决ie与⽕狐的兼容问题1.document.form.item问题(1)现有问题：现有代码中存在许多document.formName.item("itemName")这样的语句，不能在Firefox(⽕狐)下运⾏(2)解决⽅法：改⽤document.formName.elements["elementName"]2.集合类对象问题(1)现有问题：现有代码中许多集合类对象取⽤时使⽤()，IE能接受，Firefox(⽕狐)不能。

(2)解决⽅法：改⽤[]作为下标运算。

如：⼜如：3.window.event(1)现有问题：使⽤window.event⽆法在⽕狐浏览器上运⾏(2)解决⽅法：⽕狐的event只能在事件发⽣的现场使⽤，此问题暂⽆法解决。

可以这样变通：原代码(可在IE中运⾏)：新代码(可在IE和⽕狐中运⾏)：此外，如果新代码中第⼀⾏不改，与⽼代码⼀样的话(即gotoSubmit调⽤没有给参数)，则仍然只能在IE中运⾏，但不会出错。

所以，这种⽅案tpl部分仍与⽼代码兼容。

4.HTML对象的id作为对象名的问题(1)现有问题在IE中，HTML对象的ID可以作为document的下属对象变量名直接使⽤。

在⽕狐中不能。

(2)解决⽅法⽤getElementById("idName")代替idName作为对象变量使⽤。

5.⽤idName字符串取得对象的问题(1)现有问题在IE中，利⽤eval(idName)可以取得id为idName的HTML对象，在⽕狐中不能。

(2)解决⽅法⽤getElementById(idName)代替eval(idName)。

6.变量名与某HTML对象id相同的问题(1)现有问题在⽕狐中，因为对象id不作为HTML对象的名称，所以可以使⽤与HTML对象id相同的变量名，IE中能。

(2)解决⽅法在声明变量时，⼀律加上var，以避免歧义，这样在IE中亦可正常运⾏。