IE浏览器和火狐浏览器兼容问题
CSS样式IE浏览器跟火狐浏览器兼容写法
前台样式最烦人的就是各种浏览器跟分辨率的兼容问题首先需要了解各个浏览器之间样式在哪几方面容易出问题IE支持自定义光标文件cursor:url()IE支持自定义滚动条颜色风格IE6中的select有永远处在最上的bug,而且css对select不起作用。
在form中，IE支持label，包括文字和图片；但是火狐不支持图片的label，点击图片不能让label for的radio或者checkbox产生效果。
IE和火狐都是支持onscroll事件的，但是火狐中textarea对此事件不支持。
CSS方面，IE中支持在CSS中嵌入expresion，而Firefox不支持火狐支择相邻子选择符“>”，而IE6不支持（IE7支持）火狐对display的inline-block不支持，而IE均支持。
CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和火狐存在很大的解析差异，这里介绍一下兼容要点。
对高度的解析IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度火狐：没有定义高度时，如果内容中包括了图片内容，火狐的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。
结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！img对象alt和title的解析alt：当照片不存在或者load错误时的提示；title：照片的tip说明。
在IE中如果没有定义title，alt也可以作为img的tip使用，但是在火狐中，两者完全按照标准中的定义使用结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用其他的细节差别当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在火狐里面正常而IE里面有问题。
IC软电话对IE和火狐浏览器的兼容性问题V1.1
一、在火狐浏览器中需满足如下条件：
1.JRE和火狐浏览器设置
1、火狐浏览器版本必须为13~16版本的，不能用17或更高的版本；
否则无法设置登录参数；
2、Jre需为1.7.0_17及以上版本；
选中浏览器的默认Java为Mozilla系列；
选中启用下一代Java插件；
3、开启java插件；
工具-附加组件-如下2个插件设置为可用（看到的是“禁用”按钮）。
4、开启操作本地文件的设置：
在地址栏输入about:config，然后修改signed.applets.codebase_principal_support的键值，将值修改为true。
5、重启火狐浏览器
2.访问系统时的设置
1、在登录系统后浏览器弹出提示窗口时，
勾选“不再对此应用程序显示此消息”，并选择“运行”
2、如果软电话未自动登录成功，需手动点击“设置”，在窗口中设置完毕并点击“保存”
按钮后，软电话自动登录：
二、在IE浏览器中需满足如下条件：
1、Jre需为1.6.0_10及以上版本；
2、其他配置参见原IE浏览器设置；。
Win8系统更新火狐浏览器后IE不能用的解决方法
Win8系统更新火狐浏览器后IE不能用的解决方法
Win8系统中除了有自带的IE浏览器外，用户肯定还会装一些其他浏览器。
比如火狐浏览器就是比较受欢迎的第三方浏览器。
一般情况下火狐和IE浏览器是不会有冲突的，但是最近有些用户更新火狐后IE就用不了了，这个问题怎么解决呢?下面店铺就为大家介绍一下具体的解决方法吧，欢迎大家参考和学习。
具体的方法步骤如下：
1、返回到Win8系统的传统桌面位置，同时按下Win8电脑键盘上的win+R快捷键打开电脑的运行窗口;
2、在打开的运行窗口中，输入cmd并单击回车，这样就可以打开Win8电脑的命令提示符窗口了;
3、在打开的命令提示符窗口中，输入netsh winsock reset并单击回车;
4、Win8系统会自行根据命令运行，等待运行完毕之后，重启一下自己的Win8系统就可以了。
以上就是店铺为大家整理的Win8系统更新火狐浏览器后IE不能用的解决方法了，这个方法的本质就是利用命令提示符重置了网络，重置网络后就不会出现火狐和IE浏览器冲突了，希望对大家有所帮助。
IE火狐兼容问题
再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
8.float的div闭合;清除浮动;自适应高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)
例如：
<#div id=”imfloat”>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
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里面完全没有效果了。
解决火狐与IE兼容问题
CSS在firefox和ie下的兼容性问题，是最让网页设计师头痛的事。
在IE下测试明明是正常的，到了火狐下就变样了。
这样一来还得重新修改，最怕改好后在IE下又不兼容了。
这里介绍一下css在火狐和ie下的兼容要点。
∙1、DOCTYPE 影响 CSS 处理∙2、Firefox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行∙3、FireFox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中∙4、FireFox: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width ∙5、FireFox: 支持 !important, IE 则忽略, 可用 !important 为FireFox 特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上∙6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。
缺点是要控制内容不要换行∙7、cursor: pointer 可以同时在 IE 和FireFox 中显示游标手指状，hand 仅 IE 可以∙8、FireFox: 链接加边框和背景色，需设置 display: block, 同时设置float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
∙9、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。
火狐浏览器兼容整理方案
《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下则不能。
浏览器兼容性问题归总
ie7.0与ie6.0的之间不兼容，目前就我知道的有如下几个方面，如有遗漏或者说错了的地方，欢迎在后面补充或者纠正。
1. ie7,ie6 div+css出现宽度定义不同 在宽度定义上出现宽度的解释不同,IE7宽度在IE6上要宽一些,,正是这个原因网页可能会出现溢出问题, 还好这个问题可以通过更改数值或者修改一下百分比解决.
IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本，这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服 IE5.X/win对box-model的解析是一样的，他们认为width包括了边框(border)和补白(padding)，幸运的是这个情况在IE6中有了好转但是IE6在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(DOCTYPE)声明，IE6才能够接受正确的box-model 所以，tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作
2、margin加倍的问题。设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如： <#div id=\”imfloat\”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
Quote div.content { width:400px; //这个是错误的width，所有浏览器都读到了 voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容 voice-family:inherit; width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的 } html>body .content { //html>body是CSS2的写法 width:300px; //支持CSS2该写法的浏览器有幸读到了这一句 } 现在回到主题，我们经常看到!important和(空格)/**/:组合在一起使用，这个写法有什么奥妙呢？看刚才那个写法，我这里可以提供另一种写法也能达到这样的效果 Quote div.content { width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用 } html>body .content { //html>body是CSS2的写法 width:300px; //支持CSS2该写法的浏览器有幸读到了这一句 } 同样，这个方法仍必须依靠正确的文档类型声明才能够正常工作，原因在前面已经说过。文档类型声明就像一个开关，打开向后兼容的未来，而错误使用的话，就是一个Pandora box
IE和Firefox在JavaScript方面的兼容性
}
</script>
IE&Firefox:
<input name="Button8_2" type="button" value="IE" />
alert(evt); //use evt
...
}
</script>
-------------------------------------------------
6.const问题
说明:
Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法:
统一使用var关键字来定义常量.
Firefox1.5.x下,只能使用window.location.
解决方法
:使用window.location来代替window.location.href.
-------------------------------------------------
2.集合类对象问题
说明:
IE下,可以使用()或[]获取集合类对象;
Firefox下,只能使用[]获取集合类对象.
解决方法:
统一使用[]获取集合类对象.
Text2:
-------------------------------------------------
7.input.type属性问题
说明:
IE下input.type属性为只读;但是Firefox下input.type属性为读写.
-------------------------------------------------
浏览器不兼容原因及解决方案
浏览器间不兼容原因及解决办法网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6。
0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同,导致设计的页面效果不一样,所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢？广泛被使用的方法就是 CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格,针对不同的浏览器去写不同的CSS，最大化兼容浏览器。
一般情况下，我都会兼顾IE 6.0 / IE 7。
0 / firefox 2。
0浏览器,下面是用的较频繁的CSS Hack技巧：用的最广莫过于!important了，它可以针对IE（IE 7.0能正确理解!important）和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important，就可以针对其优先了。
所以为了兼顾IE 6.0与火狐之间的差异，我都会使用！important。
1、仅IE7与IE5.0可以识别＊+html select ｛…｝当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK.2、仅IE7可以识别＊+html select ｛…!important；}当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别* html select {…｝这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。
其它浏览器不识别。
4、html/＊＊/ 〉body select {…}这句与上一句的作用相同。
5、仅IE6不识别，屏蔽IE6select ｛ display /＊屏蔽IE6＊/：none；｝这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5select/*＊/ { display /*IE6，IE5不识别*/:none;｝这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
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和Firefox(火狐)在JavaScript方面的不兼容及统
4.eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
switch(this.tagName.toLowerCase()) {
case "area":
case "base":
解决方法:使用window.location来代替window.location.href.
12.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口
...
}
</script>
9.event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
ie和火狐兼容问题（转载）
ie和火狐兼容问题（转载）1. document.form.item 问题(1)现有问题：现有代码中存在许多document.formName.item("itemName") 这样的语句，不能在Firefox(火狐)下运行(2)解决方法：改用 document.formName.elements["elementName"]2. 集合类对象问题(1)现有问题：现有代码中许多集合类对象取用时使用 ()，IE 能接受，Firefox(火狐)不能。
(2)解决方法：改用[] 作为下标运算。
如：document.forms("formName") 改为 document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1]3. window.event(1)现有问题：使用 window.event 无法在火狐浏览器上运行(2)解决方法：火狐的 event 只能在事件发生的现场使用，此问题暂无法解决。
可以这样变通：原代码(可在IE中运行)：<br /><input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/><br />...<br /><script language="javascript"><br />function gotoSubmit() {<br />...<br />alert(window.event); // use window.event<br />...<br />}<br /></script>新代码(可在IE和火狐中运行)：<input type="button"name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/><br />...<br /><script language="javascript"><br />function gotoSubmit(evt) {<br />evt = evt ? evt : (window.event ? window.event : null);<br />...<br />alert(evt); // use evt<br />...<br />}<br /></script> 此外，如果新代码中第一行不改，与老代码一样的话(即gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。
css对,IE与火狐,360下宽度的兼容问题及解决方法
css对,IE与火狐，360下宽度的兼容问题及解决方法我们修改网站的时候常常遇到div+css各种浏览器的兼容问题，许多都是width的兼容调整问题，那么今天我就对自己的一点经验分享一下：（因为360使用的是ie的内核，所以可以看做是ie）;首先css对IE与firefox下宽度的不同：ie下：容器的width值＝内容宽度+border+padding；火狐下容器的width=内容宽度。
而对于块级元素与非块级元素在两种浏览器下是有所不同的，对于块级元素下两种浏览器中width设置结果基本相同，不同这处就是上面谈到的差别了，IE下容器宽度多了border+padding的宽度，即其实际内容宽度应减去bordr与padding值。
但是对于非块级元素来讲，二者有明显的不同。
首先，就是ie(以ie6为测试)下正常显示设定的宽度，但火狐下容器实际宽度则不是，其是以内容宽度+padding为参考，设置的width值并没有起作用。
我们以两个块级元素作为例子说下：<div style="width:200px;border: thick solid red; background-color:#009900;">yiyi</div><div >xing</div><div >yiyixing</div>这里所表现出来的即是火狐与IE下的不同，那么如何解决在火狐下不能实现设定宽度呢？首先我们最好在要设定层的外层清除浮动即clear:both;(为了保险)。
下面就是非块级转换成块级元素，即设display:block;这一标签帮助以块元素另起一行显示。
然后设定浮动float与width即可以了。
注意浮动与宽度要同时设定。
这里要是想要在同一行设定多个非块级元素则不能用dispaly:block;，应该只能配合使用float:left/right/none;与width:123px;因为css默认float:none;所以要想两个元素位于同一行就设定同一种浮动。
ie_firefox的兼容问题
Event的问题1、在ie中我们可以直接使用event变量，但是在firefox下由于event是局部变量，firefox 下我们可以事件绑定到元素上例如<input type="button" (event)">为了同时兼容ie和firefox 通常在函数种通过以下代码获得事件。
var theEvent = window.event||e;var srcElement = theEvent.srcElement;if (!srcElement) {srcElement = theEvent.target;}2、滤镜问题在IE下是用.filters.alpha.opacity在Firefox下是用.style.opacity一般是来设置元素的透明度，所以我们一般通过以下代码来解决兼容问题var IE = erAgent.indexOf("MSIE")>0? 1: 0;if(IE){obj.filters.alpha.opacity;}Else{obj.style.opacity;}3、innerTextIE下我们经常使用innerText，但是Firefox不支持此写法，通常我们写成textContent. 它同时兼容IE和firefox，建议大家采用textContent.对于没有html标签的我们也可以采用innerHTML替代。
4、event.srcElementIE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)5、parentNode替代parentElement在IE中我可以通过obj.parentElement获得父元素，但是firex下不支持因为firefox与IE都支持DOM，所有我们可以采用obj.parentNode来解决。
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里面完全没有效果了。
关于浏览器兼容问题的解决办法，全部都在这里了
关于浏览器兼容问题的解决办法，全部都在这⾥了⽬前，最为流⾏的浏览器共有五个：分别是ie,Edge浏览器（属于微软），⽕狐，⾕歌（chrome）Safari和Opera五⼤浏览器。
这五⼤浏览器分别有各⾃的浏览器内核，下⾯介绍以下各个浏览器的内核（包括⼀些国内的浏览器）：Trident内核：IE ，360，，猎豹，百度；Gecko内核：⽕狐----------->这个浏览器内核是开源的浏览器内核，插件⾮常多，-------------->缺点：打开速度慢（加载flash插件）<-----额外介绍----->。
Webkit:遨游，苹果，symbian；Bink:chrome浏览器，⼤部分国产浏览器最新版本都采⽤Blink；由于这些浏览器的内核不相同，因此，他们的对编辑页⾯的⼀些属性的⽀持也有所不同，接下来，我就谈⼀谈在解决浏览器兼容⽅⾯的见解：⾸先是关于innerText和textContent的问题的见解：innerText ⾕歌，⽕狐和IE8都⽀持低版本的⽕狐不⽀持innerTexttextContent在IE8中的结果是undefined；textContent在⾕歌和⽕狐中⽀持；这些内容是必须知道的，也是以后解决兼容性问题的引⼦或者思路，同时也是基础。
在解决浏览器兼容性的问题上⾯，⾸先，可以通过获取浏览器的版本来判断这个浏览器是不是⽀持这个属性，但是这种办法⾮常的⿇烦。
具体做法是：我要在⼀系列的信息中找到这个浏览器版本⾥⾯的具体是什么样的，然后⽤正则表达式去匹配，然后确定这个浏览器⾥⾯具体⽤的什么东西。
这就是整个的内容，所以，相当的⿇烦。
当然，获取浏览器版本的代码很简单，就⼀句话，⼀⾏代码，但是仅仅是为了判断这个浏览器是不是⽀持这个属性，是不是放在这⾥好像有点⼉⼤材⼩⽤了。
因此，就直接判断这个浏览器⾥⾯是不是⽀持这个属性就可以了。
为了解决这个不兼容的问题，我们可以编辑以下代码来解决上述问题：1//任意元素都可以设置成⽂本内容----------因此把“任意”元素当成对象（element）传递到函数中23//element---->任意元素4//text--->任意⽂本内容5function setInnerText(element,text) {6if(typeof (element.textContent)=='undefined'){//是IE8浏览器7 element.innerText=text;8 }else{9//浏览器⽀持textContent这个属性10 element.textContent=text;11 }12 }131415//获取任意元素中的⽂本内容16function getInnerText(element) {17if(typeof (element.textContent)=="undefined"){18//如果浏览器不⽀持textContext这个属性则返回innerText的值19return element.innerText;20 }else{21//如果浏览器⽀持textContext属性,则直接返回该属性的值22return element.textContent;23 }24 }上述代码就可以解决innnerText和textContent在各个浏览器之间不兼容的问题（上述代码⽬前只在⾕歌，⽕狐，IE8版本上⾯测试，以后还会在其他的浏览器的不同版本上⾯测试，测试结果还会不断的更新，尽请期待）。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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 保证不换行。
参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在menubar 中插入一个空格。
9、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。
所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;10、IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。
这时我们可以做如下修改div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了!：)11、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题注意事项：1、float的div一定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)<#div id=\”floatA\”><#div id=\”floatB\”><#div id=\”NOTfloatC\”>这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。
原因是NOTfloatC并非float标签，必须将float 标签闭合。
在<#div class=\”floatB\”><#div class=\”NOTfloatC\”>之间加上<#div class=\”clear\”>这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float 属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为如下即可：.clear{clear:both;}此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout 私有属性(万恶的IE啊!)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：.colwrapper{overflow:hidden;zoom:1;margin:5px auto;}2、margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;例如：<#div id=\”imfloat\”>相应的css为#IamFloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3、关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。
在IE中，外层的宽度会被内层更宽的div挤破。
一定要用Photoshop或者Firework量取像素级的精度。
4、关于高度的问题如果是动态地添加内容，高度最好不要定义。
浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
(似乎有时候不会自动往下撑开，不知道具体怎么回事)5、最狠的手段- !important;如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下.tabd1{background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过;IE7.0出来了，对CSS的支持又有新问题。
浏览器多了，网页兼容性更差了，疲于奔命的还是我们，为解决IE7.0的兼容问题，找来了下面这篇文章：现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示!搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：#example { color: #333; } /* Moz */* html #example { color: #666; } /* IE6 */*+html #example { color: #999; } /* IE7 */那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999，他们都互不干扰。
---------------------------------------------------------------------------------------------------------------------------------先温习一下对于IE的box-model的破解IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本，这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服IE5.X/win对box-model的解析是一样的，他们认为width包括了边框(border)和补白(padding)，幸运的是这个情况在IE6中有了好转但是IE6在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(DOCTYPE)声明，IE6才能够接受正确的box-model所以，tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作Quotediv.content {width:400px; //这个是错误的width，所有浏览器都读到了voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容voice-family:inherit;width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的}html>body .content { //html>body是CSS2的写法width:300px; //支持CSS2该写法的浏览器有幸读到了这一句}现在回到主题，我们经常看到!important和(空格)/**/:组合在一起使用，这个写法有什么奥妙呢?看刚才那个写法，我这里可以提供另一种写法也能达到这样的效果Quotediv.content {width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用}html>body .content { //html>body是CSS2的写法width:300px; //支持CSS2该写法的浏览器有幸读到了这一句}同样，这个方法仍必须依靠正确的文档类型声明才能够正常工作，原因在前面已经说过。
文档类型声明就像一个开关，打开向后兼容的未来，而错误使用的话，就是一个Pandora box---------------------------------------------------------------------------------------------------------------ie7.0的面世，尚且不论他是否较之ie6.0进步，ie7和ie6 之间不兼容，毫无疑问又引入了新的痛处，至少在调试的过程中，又多了一道程序以及随之而来的大量不兼容。