IE与Firefox的兼容性问题

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的组件，可以快速构建一个响应式、移动优先的网站。

从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.CSS技巧1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。

缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。

这是一个ie6都存在的bug。

解决方案是在这个div里面加上 display:inline; 例如：<#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px; display:inline;}3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;4 IE与宽度和高度的问题 IE 不认得min-这个定义，但实际上它把正常的width 和height当作有min的情况来使。

这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，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里面完全没有效果了。

《firefox与IE 浏览器兼容整理方案》keywords: javascript;css;firefox;ie;区别1. document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下,只能使用document.formName.elements["elementName"].解决方法:统一使用document.formName.elements["elementName"].2.集合类对象问题说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.解决方法:统一使用[]获取集合类对象.3.自定义属性问题说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.解决方法:统一通过getAttribute()获取自定义属性.4.eval("idName")问题说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id 为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.5.变量名与某HTML对象ID相同的问题说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。

CSS兼容IE/Firefox要点样式定义要注意不同浏览器的兼容问题，如：IE与Firefox的兼容主要样式有margin , width , cursor等等此处参看网上IE与Firefox的兼容文章首先声明下，不同的浏览器margin，padding默认值不同所有CSS样式优先定义*{margin:0px;padding:0px}其次firefox和IE对CSS的宽度定义也不同：其实CSS ’width’指的是标准CSS中所指的width的宽度，在firefox中的宽度就是这个宽度。

它只包含容器中内容的宽度。

而Internet Explorer ’width’则是指整个容器的宽度，包括内容，padding ，border。

Firefox中：容器占的宽度=内容宽度+padding宽度+border宽度IE中：内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度所以，如果IE中定义 width:120px;padding:5px 的话，所显示的宽度就是120px.即padding:5px是在width里面。

而Firefox中，上面这个定义，显示宽度就是 130 px;所以，我们就必须这样定义width:115px !important;width:120px;padding:5px;必须注意的是， !important; 一定要在前面。

CSS 兼容要点：1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。

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

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

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

一、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代码在不同浏览器上无法正常工作。