IE与Firefox的兼容性问题
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的组件,可以快速构建一个响应式、移动优先的网站。
最全的IE6,IE7,IE8与Fireofx浏览器兼容问题整理(2)
从网上收集了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 下面根本等于没有设置宽度和高度。
Firefox和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下则不能。
IE和Firefox下js的兼容写法小结
Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
Firefox:只能使用window.frameName来访问这个frame对象.
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE 和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
25. CSS双线凹凸边框
IE:border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
IE与Firefox兼容问题
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代码在不同浏览器上无法正常工作。
ie6、7、8、火狐浏览器兼容性
解决IE7、IE8样式不兼容问题
方法:要在页面中加入如下HTTP meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
只要IE8一读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。
注:
IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。
由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想Байду номын сангаас的页面效果。
IE6 IE7 FF
_ √ × ×
* √ √ ×
!important × √ √
----------------------------------------
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
<meta http-equiv="x-ua-compatible" content="ie=7" />
IE和FF的兼容性问题
22. 对select的options集合操作
枚举元素除了[]外,SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。注意在add后赋值元素,否则会失败(本人试验如此)。
7.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题。
23. XMLHTTP的区别
//mf
if (window.XMLHttpRequest) //mf
{
xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("GET",url,true)
解决办法:统一使用document.getElementById("idName");
FIREFOX与IE兼容性探讨
1. CSS样式兼容性问题的出现关于FireFox和IE6对CSS样式的兼容性差异由来已久,它们对标准兼容的差异性,导致了大量网站开发人员的工作量加倍,不得已煞费苦心的在Firefox和IE间进行调试,对于以前很少有关注过CSS样式浏览器兼容性问题的开发人员来说,更是一件雪上加霜的事情,原本调CSS就是一件很烦的事情,再加上兼容性问题的阻碍,使很多开发人员咬牙切齿,却也无可奈何。
2. CSS样式调试工具有句话说得好,工欲善其事,必先利其器。
作为一名IT开发人员来说那就是欲想编程好,必先工具好。
在C++方面有Microsoft Studio的支持,在Java方面有eclipse的支持,而对于市面上调试CSS样式的工具却不是很多,但现有的工具也基本上满足我们的需求。
首先介绍FireFox下的调试工具Firebug,这一款非常优秀的调试工具,不仅对CSS 样式的调试起了所见即所得的功效,同时还支持JS的调试,DOM查看器,控制台,可编辑Html及网络状况监视器等(JS等方面请查看其他相关文档)。
对于开发人员来说,有如此好的调试工具,当然是不容错过的一件事情。
IE6下也提供了一款CSS样式调试工具IE DevToolbar,这款工具相对来说功能相对单一,但为了在IE上也能够进行CSS进行调试,这款工具也勉强派得上用场了。
由于对标准支持的不统一,IE对浏览器领域统治多年,产生了自己的一套标准,而兴起的Firefox及Google的Chrome则是对原有的标准进行了支持,所以两者之间的冲突在所难免。
现在以实例方式来说明两种浏览器之间的差异,并提供相应的解决方法。
希望在浏览器CSS样式兼容性上有需要的朋友可以得到帮助。
3. Firefox与IE的Hack介绍Hack 是指浏览器对CSS样式某些标志的识别,通过这些识别,同一CSS属性我们可以为不同的浏览器指定不同的C SS样式,以规避浏览器不同带来的差异。
首先介绍“!important”,这是我们最常使用的Hack标识,记住,需要“!”作为开头,比如“width:80!important;”。
如何解决ie与火狐的兼容问题
如何解决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中亦可正常运⾏。
ie打不开网页 其他浏览器可以
ie打不开网页其他浏览器可以介绍在日常使用计算机时,我们经常会遇到ie浏览器打不开网页的问题。
而其他浏览器却能够正常访问相同的网页。
本文将讨论可能导致这个问题的原因,并提供一些解决方案。
可能的原因1. 版本不兼容ie浏览器的各个版本之间存在兼容性差异。
有时,网页使用了一些新的Web技术或标准,而老版本的ie浏览器无法正确解析这些内容,从而导致无法打开网页。
其他现代浏览器,如Chrome、Firefox或Edge等,在更新后往往更好地支持最新的Web标准。
2. 插件或扩展问题有时,安装的插件或扩展会导致ie浏览器无法打开特定网页。
这些插件可能与网页的脚本或内容发生冲突,从而导致浏览器崩溃或无法打开页面。
3. 安全设置问题ie浏览器的安全设置可能会阻止某些网页的加载。
如果设置过高,浏览器会阻止加载具有潜在风险的内容。
这可能导致某些网页无法在ie浏览器中打开。
4. 缓存问题ie浏览器可能会缓存旧的网页版本,而不是获取新的页面内容。
这可能导致ie无法显示更新的网页或无法加载最新的更改。
解决方案1. 更新ie浏览器首先,尝试更新ie浏览器到最新版本。
新版本的ie浏览器通常会修复旧版本的兼容性问题,并提供更好的浏览体验。
2. 禁用插件或扩展如果安装了很多插件或扩展,请尝试禁用它们,然后重新打开网页。
逐个禁用插件,直到找到导致问题的插件为止。
有时,某些插件与特定网页发生冲突,禁用它们可以解决问题。
3. 重新设置安全设置在ie浏览器中重新设置安全级别可以解决某些打不开网页的问题。
您可以将安全级别设置为默认,并逐渐提高级别,以确定导致问题的具体设置。
4. 清除浏览器缓存清除ie浏览器缓存可以解决一些页面无法加载或无法显示更新内容的问题。
您可以在浏览器设置中找到清除缓存的选项,然后重新打开网页。
结论ie浏览器打不开网页,但其他浏览器可以的问题是常见的。
主要原因可能是版本不兼容、插件冲突、安全设置或缓存问题。
通过更新浏览器、禁用插件、重新设置安全设置或清除缓存,我们通常可以解决这些问题。
IE-FireFox兼容性问题以及内核的分类
同内核的浏览器a)Trident内核,代表产品Internet Explorer世界之窗(The World)傲游浏览器(Maxthon)腾讯TT(Tencent Traveler)爱帆浏览器(A vant Browser)360安全浏览器(360SE)搜狗浏览器(兼容模式)(Sougou Explorer)瑞影浏览器(Rayying)360极速浏览器(兼容模式)(360chrome)百度浏览器(兼容模式)b)Gecko内核,代表作品Mozilla FirefoxFirefox、网景6~9、SeaMonkey、Camino、Mozilla、Flock、Galeon、K-Meleon、Minimo、Sleipni、Songbird、XeroBank。
Google Gadget引擎采用的就是Gecko浏览器引擎。
c)WebKit内核,代表作品Safari、ChromeNDS Browser、Nokia 770网络浏览器d)Presto内核,代表作品OperaOmniWeb、Shiira浏览器对js的兼容性兼容性e)HTML对象的id 作为对象名的问题问题:在IE中,HTML对象的ID 可以作为document 的下属对象变量名直接使用,在FF中不能解决方法:使用对象变量时全部用标准的getElementById("idName")f)用idName字符串取得对象的问题问题:在IE中,利用eval("idName") 可以取得id 为idName的HTML对象,在FF中不能解决方法:用getElementById("idName") 代替eval("idName")g)变量名与某HTML对象id 相同的问题问题:在FF中,因为对象id 不作为HTML对象的名称,所以可以使用与HTML对象id 相同的变量名,IE中不能解决方法:在声明变量时,一律加上var,以避免歧义,这样在IE中亦可正常运行最好不要取与HTML对象id 相同的变量名,以减少错误h)调用子框架或者其它框架中的元素的问题在IE中,可以用如下方法来取得子元素中的值document.getElementById("frameName").(document.)elementNamewindow.frames["frameName"].elementName在FF中则需要改成如下形式来执行,与IE兼容:window.frames["frameName"].contentWindow.document.elementNamewindow.frames["frameName"].document.elementNamei)对象宽高赋值问题问题:FireFox中类似obj.style.height = imgObj.height的语句无效解决方法:统一使用obj.style.height = imgObj.height + "px";j)innerText的问题问题:innerText在IE中能正常工作,但是innerText在FireFox中却不行解决方法:在非IE浏览器中使用textContent代替innerTextk)Window.location问题火狐1.5下不支持window.location.href,所以url链接尽量均使用window.location 以上都是些常见常用的兼容性问题,建议大家再看下文档,或针对某个对象查询下资料onchange事件<input>元素和<select>的<option>元素都支持onchangge事件,但是经常我们会发现元素的内容值变化了却没有触发onchangge事件。
IE浏览器和火狐浏览器兼容问题
I E浏览器和火狐浏览器兼容问题集团标准化办公室:[VV986T-J682P28-JP266L8-68PNN]IE浏览器和火狐浏览器兼容问题.txt22真诚是美酒,年份越久越醇香浓型;真诚是焰火,在高处绽放才愈是美丽;真诚是鲜花,送之于人手有余香。
一颗孤独的心需要爱的滋润;一颗冰冷的心需要友谊的温暖;一颗绝望的心需要力量的托慰;一颗苍白的心需要真诚的帮助;一颗充满戒备关闭的门是多么需要真诚这一把钥匙打开呀!IE浏览器和火狐浏览器兼容问题——CSS篇一、css+div 样式 IE与FF兼容问题汇总IE和火狐的css兼容性问题归总CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点。
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 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。
缺点是要控制内容不要换行7、cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以8、FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。
Firefox和IE兼容性问题
IE火狐浏览器兼容问题大全1.最简单的鼠标移过手变型的css要改了cursor:pointe r;/*Firefo x不支持c u rsor:hand*/ dw8下面自动出来的也没有han d这个属性了,标准的是po inter2.Firefo x不支持滤镜最常见的半透明不支持。
filter: Alpha(Opacit y=50); /* for IE */opacit y: .5;/* for Firefo x */style="-moz-opacit y:0.5; filter:alpha(opacit y=50);cursor:hand;"onmous eover="this.style.MozOpa city=1;this.filter s.alpha.opacit y=100" onmous eout="this.style.MozOpa city=0.5;this.filter s.alpha.opacit y=50"3.Firefo x不支持e x pres sion例如去掉链接的边框要分别写不同的cssa,area { blr:expres sion(this.onFocu s=this.blur()) } /* for IE */:focus{ outlin e: none; } /* for Firefo x */4.Firefo x不支持d iv滚动条的颜色设置,目前还没有找到替换的好方法。
.conten div {positi on: absolu te; left: 0px; top: 10px; width: 580px;height: 135px;line-height:120%;text-align:left; font-family:"宋体";word-break: break-all; color:#6D6E71; OVERFL OW-Y:auto;OVERFL OW-X:no;SCROLL BAR-ARROW-COLOR: red; SCROLL BAR-TRACK-COLOR:F6F6F6;SCROLL BAR-FACE-COLOR:#F6F6F6;SCROLL BAR-SHADOW-COLOR:#F6F6 F6;SCROLL BAR-DARKSH ADOW-COLOR:#F6F6F6;SCROLL BAR-3DLIGH T-COLOR:#F6F6F6;SCROLL BAR-HIGHLI GHT-COLOR:#F6F6F6;}这个在Fir efox里面完全没有效果了。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
有些事情看起来简单,处理起来才会知道很麻烦。
同样在更改页面颜色调节功能IE与Firefox 的兼容性时遇到的几个问题及解决办法供大家参考:
1、Firefox无法响应DIV的onClick事件
原因:Firefox下不支持以下语法:
<DIV onClick="javascript:onPre();">
解决:全部按以下形式书写:
<DIV onClick=onPre()>
2、无法动态创建页面元素,即createElement无效
原因:在Fireox下不只能使用标签名做参数,不能使用<>形式,如以下语句在Firefox下不起作用,但在IE下能正常工作:
var obj=document.createElement('<DIV id=h_sb></DIV>');
解决:全部按以下形式书写:
var obj=document.createElement('DIV');
obj.id='h_sb';
3、在为动态创建的元素指定事件处理函数时,在Firefox下是运行指定函数,而非设置
原因:Firefox下,指定时间处理函数时不能带参数,否则Firefox只会执行函数,如:obj.onClick=test(1);
在Firefox下会运行test函数,而不是将test函数关联到obj的click事件
解决:如果指定函数无参数则使用:
obj.onClick=test;
如果指定函数有参数则:
obj.onClick=function(){test(1)};
4、将动态元素添加到页面时,insertBefore出错
原因:在Firefox下不可省略insertBefore函数的第二参数
解决:使用如下语句:
document.body.insertBefore(obj,null);
5、Firefox下无event对象,无法直接获取鼠标坐标
解决:在指定事件处理函数时使用如下语句:
obj.onClick=function(ev){onMidClick(ev,sb_h)};
说明:以上ev参数类时ie的event对象,由系统自动填入,第二参数为用户自定义参数
在处理函数onMidClick中:
function onMidClick(evt,objSb){
var mx; //获取鼠标的X坐标
if ( window.event ){
mx=event.clientX;
}else{
mx=evt.pageX;
}
}
6、表格操作函数无效,即以下语句无法工作:
var newrow=objnt.insertRow();
var cal=newrow.insertCell();
原因:与第四一样不可缺省参数
解决:使用如下语句:
var newrow=objnt.insertRow(-1);
var cal=newrow.insertCell(-1);
7、Firefox下无法直接获取styleSheet的cssText,在IE下,可直接获取并设置styleSheet的cssText,但在Firefox下只能使用document.styleSheets[0].cssRules[0].cssText单个获取样式,同时使用使用:
document.styleSheets[0].cssRules[0].cssText=newcssText;
页面不会自动更新样式,必须使用:
document.styleSheets[0].cssRules[0].style.cssText=newcssText;
8、Firefox下使用数组不能使用圆括号(),只能使用中括号[]。