Javascript的IE和Firefox兼容性汇编

合集下载

浏览器兼容的JS写法总结

浏览器兼容的JS写法总结

浏览器兼容的JS写法总结,涵盖的内容很全面,感兴趣的小伙伴们可以参考一下一、元素查找问题1. document.all[name](1)现有问题:Firefox不支持document.all[name](2)解决方法:使用getElementsByName(name),getElementById(id)等来替代。

2. 集合类对象问题(1)现有问题:IE中对许多集合类对象取用时可以用(),但在Firefox只能用[]。

如:IE中可以使用document.forms("formName")来返回名字为"formName"的Form,但在Firefox却行不通。

(2)解决方法:使用[],上例中可以改为document.forms["formName"]3. HTML元素的ID在JavaScript可见(1)现有问题:IE中HTML元素中的ID可以作为document的下属对象变量名直接使用。

在Firefox中不能。

(2)解决方法:使用getElementById("idName")代替idName作为对象变量使用。

4. eval(idName)取得对象(1)现有问题:在IE中,利用eval(idName)可以取得ID为idName的HTML对象,在Firefox中不能。

(2)解决方法:用getElementById(idName) 代替eval(idName)。

 5. 变量名与某HTML对象ID相同(1)现有问题:在Firefox中,因为对象ID不作为HTML对象的名称,所以可以使用与HTML对象id相同的变量名,IE中不能。

(2)解决方法:在声明变量时,一律加上var,以避免歧义,这样在IE中亦可正常运行。

此外,最好不要取与HTML对象id相同的变量名,以减少错误。

注:3、4和5都属于同一类的问题。

6. Frame(1)现有问题:在IE中可以用window.top.frameId和window.top.frameName来得到该Frame所代表的Window,Firefox中只能用window.top.frameName。

IE和Firefox浏览器兼容

IE和Firefox浏览器兼容
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
第一种,是CSS HACK的方法
CSS兼容IE6,IE7,FIREFOX的一些收集:
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。
这样也属于CSS HACK,不过没有上面这样简洁。
现在对div元素再定义一个样式:
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式:

兼容firefox和ie的javascript的一些写法

兼容firefox和ie的javascript的一些写法

有很多人遇到这样的问题,干脆把我的收藏共享出来算了:推荐flapjax用用。

相关链接[url]/blog/140924/22646[/url]以下是转载的正文:兼容firefox和ie的javascript的一些写法最近我想让我们的CMS能在firefox中使用,于是以前所写的javascript代码就都需要考虑兼容问题了,无端增加了好多工作量。

下面是兼容firefox和ie时需要注意的一些写法一,事件处理在ie中处理事件直接使用window.event对象即可,但在firefox中,是没有window.event 对象的,函数需要使用事件的时候,需要在事件发生时把事件作为参数传递给函数,不象在ie中,事件对象是全局的,随处都可以访问。

下面这个getEvent()函数可以兼容firefox 和ie,只需要在访问事件对象的函数的开始调用getEvent()即可,不用再把事件作为参数传递。

function myfunc(){var evt=getEvent();var element=evt.srcElement || evt.target;}function getEvent(){if(document.all) return window.event;//如果是iefunc=getEvent.caller;while(func!=null){var arg0=func.arguments[0];if(arg0){if((arg0.constructor==Event || arg0.constructor ==MouseEve nt) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) {return arg0;} }func=func.caller;}return null;}在firefox和ie中event对象还是有些差别的,比如ie中event.srcElement,在firefox 中就是event.target,具体可参考:[url]/domref/domevent.shtml[/url]二,访问frame或iframe对象在ie中可以通过frame的id或name来访问,但在firefox中只能用frame的name来访问.三,自定义属性在ie中自定义属性可以直接访问,但在firefox中需要使用getAttribute() 比如<td id="name" tel="1234"></td>ie中:alert(name.tel);firefox中:alert(name.getAttribute("tel"));四,innerText和textContentie中的innerText在firefox中对应的是textContent例如if(document.all){document.getElementById('element').innerText = "my text";} else{document.getElementById('element').textContent = "my text";}。

js中IE和Mozzila Firefox的一些不通用的属性方法

js中IE和Mozzila Firefox的一些不通用的属性方法

js中IE和Mozzila Firefox的一些不通用的属性方法收藏以下以IE 代替Internet Explorer,以MF 代替Mozzila Firefox1. document.form.item问题(1)现有问题:现有代码中存在许多document.formName.item("itemName") 这样的语句,不能在MF 下运行(2)解决方法:改用document.formName.elements["elementName"](3)其它参见22. 集合类对象问题(1)现有问题:现有代码中许多集合类对象取用时使用(),IE 能接受,MF 不能。

(2)解决方法:改用[] 作为下标运算。

如:document.forms("formName") 改为document.forms["formName"]。

又如:document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1](3)其它3. window.event(1)现有问题:使用window.event无法在MF 上运行(2)解决方法:MF 的event 只能在事件发生的现场使用,此问题暂无法解决。

可以这样变通:原代码(可在IE中运行):<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>...<script language="javascript">function gotoSubmit() {...alert(window.event); // use window.event...}</script>新代码(可在IE和MF中运行):<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>...<script language="javascript">function keyHandle(evt){if (evt.keyCode) {if(evt.keyCode==32)return false;} else {if(evt.which==32)return false;}return true;}</script>此外,如果新代码中第一行不改,与老代码一样的话(即gotoSubmit调用没有给参数),则仍然只能在IE中运行,但不会出错。

JavaScript-FF和IE兼容性问题总结

JavaScript-FF和IE兼容性问题总结

长久以来JavaScript兼容性一直是Web开发者的一个主要问题。

在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。

为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性:一、函数和方法差异;二、样式访问和设置;三、DOM方法及对象引用;四、事件处理;五、其他差异的兼容处理。

一、函数和方法差异1. getYear()方法【分析说明】先看一下以下代码:var year= new Date().getYear();document.write(year);在IE中得到的日期是"2010",在Firefox中看到的日期是"110",主要是因为在Firefox 里面getYear 返回的是"当前年份-1900" 的值。

【兼容处理】加上对年份的判断,如:var year= new Date().getYear();year = (year<1900?(1900+year):year);document.write(year);也可以通过getFullYear getUTCFullYear 去调用:var year = new Date().getFullYear();document.write(year);2. eval()函数【分析说明】在IE中,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象。

【兼容处理】统一用getElementById("idName")来取得id为idName的HTML对象。

3. const声明【分析说明】在IE 中不能使用const 关键字。

在IE和火狐浏览器下页面兼容性问题的处理(最完整篇)

在IE和火狐浏览器下页面兼容性问题的处理(最完整篇)

最全的CSS浏览器兼容问题CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了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;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:00 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block;//可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果diplay:table;4 IE与宽度和高度的问题 IE 不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析

小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧!1. children与childNodesIE提供的children、childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会。

比如:&lt;div id="dd"&gt;&lt;div&gt;yizhu2000&lt;/div&gt;&lt;/div&gt;d为dd的div在IE下用childNodes查看,其子节点数为1,而ff下为三,我们可以从firefox的dom查看器里面看到他的childNodes为["\n ", div, "\n"]。

要在firefox下模拟children的属性我们可以这样做:if (typeof(HTMLElement) != "undefined" &amp;&amp; !window.opera) {HTMLElement.prototype.__defineGetter__("children", function() {for (var a = [], j = 0, n, i = 0; i &lt; this.childNodes.length; i++) {n = this.childNodes[i];if (n.nodeType == 1) {a[j++] = n;if () {if (!a[])a[] = [];a[][a[].length] = n;}if (n.id)a[n.id] = n;}}return a;});}2. firefox和ie的事件window.event只能在IE下使用,而不能用在Firefox下,这是因为Firefox的event只能在事件发生的现场使用。

Firefox和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在JavaScript方面的兼容性

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属性为读写.
-------------------------------------------------

js在IE和Firefox不同之处

js在IE和Firefox不同之处

js在IE和Firefox不同之处做Web类项目,不可避免的要涉及浏览器的兼容性问题,特别是javascript的兼容性问题,典型代表就是IE浏览器与FireFox浏览器,熟悉到不一致之处就能够避免出现使用不一致浏览器时可能会出现的兼容性问题,找了一些关于js在IE与FireFox中区别的资料,以供参考。

1. document.form.item 问题问题:现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在Firefox 下运行解决方法:统一使用 document.formName.elements["elementName"]2. 集合类对象问题问题:IE下,能够使用()或者[]获取集合类对象;Firefox下,只能使用[]获取集合类对象解决方法:改用[ ]作为下标运算。

如:document.forms("formName") 改为document.forms["formName"]又如:document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1]3. event获取event问题:window.event只能在IE下运行,而不能在Firefox下运行,这是由于Firefox的event只能在事件发生的现场使用。

解决方法:在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者者event来引用Event对象。

Firefox中获取event的方法:(1) 从HTML页面传递参数event (2) event = arguments.callee.caller.arguments[0];function getEvent(evt) { evt=evt?evt:(window.event?window.event:null); }event属性问题:IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

javascript代码在浏览器IE和Firefox兼容性的16个问题

javascript代码在浏览器IE和Firefox兼容性的16个问题

javascript代码在浏览器IE和Firefox兼容性的16个问题javascript代码在浏览器IE和Firefox兼容性的16个问题1. document.form.item 问题(1)现有问题:现有代码中存在许多document.formName.item("itemName") 这样的语句,不能在 MF 下运行(2)解决方法:改用 document.formName.elements["elementName"](3)其它参见 22. 集合类对象问题(1)现有问题:现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能。

(2)解决方法:改用[] 作为下标运算。

如:document.forms("formName") 改为 document.forms["formName"]。

又如:document.getElementsByName("inputName")(1) 改为document.getElementsByName("inputName")[1](3)其它3. window.event(1)现有问题:使用 window.event 无法在 MF 上运行(2)解决方法:MF 的event 只能在事件发生的现场使用,此问题暂无法解决。

可以这样变通:原代码(可在IE中运行):<="" name="someButton" p="" type="button" value="提交"/>onclick="javascript:gotoSubmit()"/>...新代码(可在IE和MF中运行):<="" name="someButton" p="" type="button" value="提交"/>onclick="javascript:gotoSubmit(event)"/>...此外,如果新代码中第一行不改,与老代码一样的话(即gotoSubmit 调用没有给参数),则仍然只能在IE 中运行,但不会出错。

ie和火狐兼容问题(转载)

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中运行,但不会出错。

Firefox浏览器兼容JS脚本供参考

Firefox浏览器兼容JS脚本供参考

Firefox浏览器兼容JS脚本供参考最近做了一个项目,遇到了FireFox和IE脚本不兼容的问题,为此从网上搜集了部分兼容的脚本,另外自己也摸索了一点,原本写在了自己另外一个博客里,现拷过来供大家参考,原文1.window.event兼容脚本2.屏蔽Form提交事件3.获取事件源4.添加事件兼容写法5.Firefox注册innerText写法6.长度7.父控件下的子控件8.XmlHttp1.window.event兼容脚本function getEvent(){ //获取浏览器事件,同时兼容ie和ff的写法if(document.all) return window.event;func=getEvent.caller;while(func!=null){var arg0=func.arguments[0];if(arg0){if((arg0.constructor==Event arg0.constructor ==MouseEvent)(typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){return arg0;}}func=func.caller;}return null;}每次用事件之前Firefox都需要用getEvent()获取一下,否则就是空2.屏蔽Form提交事件event.returnValue=false;// for IEevt.preventDefault();//for firefox3.获取事件源var source=event.srcElement //IEvar source=event.target //firefox4.添加事件兼容写法function addEvent(oElement,sEvent,func){if (oElement.attachEvent){oElement.attachEvent(sEvent,func);}else{sEvent=sEvent.substring(2,sEvent.length);oElement.addEventListener(sEvent,func,false);}}用法:addEvent(window,"onload",Start);5.Firefox注册innerText写法//注册firefox innerTextHTMLElement.prototype.__defineGetter__("innerText",function(){var anyString = "";var childS = this.childNodes;for(var i=0; i if(childS[i].nodeType==1)anyString += childS[i].tagName=="BR" ? '\n' : childS[i].innerText;else if(childS[i].nodeType==3)anyString += childS[i].nodeValue;}return anyString;});HTMLElement.prototype.__defineSetter__("innerText",function(sText){this.textContent=sText;});6.长度:FireFox长度必须加“px”,IE无所谓7.父控件下的子控件:IE是“children”,FireFox是“childNodes”8.XmlHttp在IE中,XmlHttp.send(content)方法的content可以为空,而firefox则不能为空,应该用send(" "),否则会出现411错误。

Javascript多阅读器兼容性问题及解决方案

Javascript多阅读器兼容性问题及解决方案

Javascript 多阅读器兼容性问题及解决方案一、document.formName.item(”itemName”) 问题问题说明:IE下,能够利用document.formName.item(”itemName”) 或document.formName.elements ["elementName"];Firefox 下,只能利用document.formName.elements["elementName"]。

解决方式:统一利用document.formName.elements["elementName"]。

二、集合类对象问题问题说明:IE下,能够利用() 或[] 获取集合类对象;Firefox下,只能利用[ ]获取集合类对象。

解决方式:统一利用[] 获取集合类对象。

三、自概念属性问题问题说明:IE下,能够利用获取常规属性的方式来获取自概念属性,也能够利用getAttribute() 获取自概念属性;Firefox下,只能利用getAttribute() 获取自概念属性。

解决方式:统一通过getAttribute() 获取自概念属性。

四、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下那么不能。

IE浏览器和火狐浏览器兼容问题

IE浏览器和火狐浏览器兼容问题

之迟辟智美创作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;”!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 之间不兼容,毫无疑问又引入了新的痛处,至少在调试的过程中,又多了一道法式以及随之而来的年夜量不兼容.目前,使用ie7.0的用户尚且是少数,使用ie6.0的用户仍然占据很年夜的比重.然而,年夜量通过ie6 测试的网页,在ie7.0中都显示不正常.据ie7.0官方解说:ie7.0在IE6的基础上引入了strict模式,包括了许多有关于层叠样式表(CSS)解析与呈现的改进.这些改进意在提高Internet Explorer解释层叠样式表的一致性,以到达W3C的推荐的标准,同时为开发者提供一个可以依赖的功能集合.不论官方的语言是何等动人,也不论ie7.0是不是真的W3C了,浏览器之间太多个性化的工具,太多不同,让我们无可奈何.在ie7.0下设计出的网页,ie6下面显示的几乎是不胜入目.那么,我们在设计网页的时候,在解决好ie6.0与火狐的兼容问题的同时,我们是更多的服从符合W3C一些的ie7.0,还是对96%的ie6.0妥协?这个问题其实有些过剩,我们能做的,或许只有选择中庸,只有尽量调试到各个浏览器都显示正常吧.ie7.0与ie6.0的之间不兼容,目前就我知道的有如下几个方面,如有遗漏或者说错了的处所,欢迎在后面弥补或者纠正.1. ie7,ie6 div+css呈现宽度界说分歧在宽度界说上呈现宽度的解释分歧,IE7宽度在IE6上要宽一些,,正是这个原因网页可能会呈现溢出问题, 还好这个问题可以通过更改数值或者修改一下百分比解决.2. ie7.0修复了!important这个bug.先前由于ie6.0对!important识别存在bug, 在firefox和IE中的BOX模型解释纷歧致招致相差2px,年夜部份网页标准设计师通过这个bug来兼容ie6.0和firefox,即采纳:div {margin:30px!important;margin:28px;}.可是ie7.0把这个bug给修复了,所以问题又呈现了,怎么兼容 ie.7.0的同时又能兼容ie6.0和firefox?3. Box Model的改变在IE7中,为了适应CSS2.1 box model修改了溢出的行为.4. ie7.0中一些CSS filter将不再可用IE7中修改了许多潜在解析毛病,这些可能会阻止filter在以前的IE版本中正常工作.如:*HTML filter,下划线filter和/**/注释filter等等.5. ie7.0对很多不规范的css不再支持,对js语法要求更严格规范. overflow:hidden这个CSS样式是年夜家经常使用到的CSS样式,可是年夜大都人对这个样式的理解仅仅局限于隐藏溢出,而对清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式:clear:both,我相信对这个属性的理解年夜家都不成问题的.可是对“浮动”这个词究竟包括什么样的含义呢?我们下面来详细的论述一下.这是一个经常使用的div写法,下面我们来书写样式.年夜家可以在DMX中自己做试验#wai{ width:500px; background:#000; height:500px;}#nei { float:left; width:600px; height:600px; background:red;}可以看到,我给nei这个id加了一个浮动,我们惯例的理解是,我们允许nei这个id的div的右边呈现其他的内容,只要它的宽度不超越wai 这个div和nei这个div的剩余值.如果div wai中还包括其他的div,我不允许它呈现在nei的右侧,我们则用样式clear:both指定这个div,不允许它浮动在nei右侧.这些在ie6里面是正确的.可是在火狐或者其他浏览器里面,我们发现问题其实不是如此简单.我们发现,当nei这个div的宽度和高度都年夜于wai这个div的时候,wai并没有被内撑开而是依旧显示为我们指定的宽高.在我的例子中,都是500.这个时候我不理解了,我搜索了很多的资料,可是都没能理解这是为什么,直到看到他人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题.我们直到overflow:hidden这个属性的作用是隐藏溢出,给wai加上这个属性后,我们的nei的宽高自动的被隐藏失落了.另外,我们再做一个试验,将wai这个div的高度值删除后,我们发现,wai的高度自动的被nei这个div的高度值给撑开了.说到这里,我们再来理解一下“浮动”这个词的含义.我们原先的理解是,在一个平面上的浮动,可是通过这个试验,我们发现,这不单仅是一个平面上的浮动,而是一个立体的浮动!也就是说,当nei这个div加上浮动这个属性的时候,在显示器的正面,它已经脱离了wai这个div,也就是说,此时的nei的宽高是几多,对已经脱离了的wai来说,都是不起作用的.打个形象的比如就是当JJ脱离BB的时候,JJ的年夜小对BB是没有撑开的作用的(有点少儿不宜的感觉-_-|||)OK,当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了.也就是说,当我们给wai这个div加上overflow:hidden这个属性的时候,其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除,就好比JJ又进入了BB内,JJ的年夜小自然又会影响到BB的年夜小.这就是overflow:hidden这个属性清除浮动的准确含义.当我们没有给wai这个div设置高度的时候,nei这个div的高度,就会撑开wai这个div,而在另一个方面,我们要注意到的是,当我们给wai这个div加上一个高度值,那么无论nei这个div的高度是几多,wai这个高度都是我们设定的值.而当nei的高度超越wai的高度的时候,超越的部份就会被隐藏.这就是隐藏溢出的含义!我相信,通过我的这些文字,年夜家对overflow:hidden这个属性有了全新的认识.希望年夜家和我一样,在div+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; 然后拔出文字,就垂直居中了.缺点是要控制内容不要换行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 这句放置在另一句之上,上面已经提过 undefined undefinedirefox不支持hand,但ie支持pointer解决方法: 统一使用pointer5. padding 问题padding 5px 4px 3px 1px FireFox无法解释简写,必需改成padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;6. 消除ul、ol等列表的缩进消除ul、ol等列表的缩进样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效,padding属性对FireFox有效7. CSS透明IE:filter:progidXImageTransform.Microsoft.Alpha(style=0,opacity=60). FF:opacity:0.6.8. CSS圆角IE:不支持圆角.FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;.9. 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;10. 滤镜IE中支持使用滤镜,而Firefox中不支持.11. 禁止选取网页内容:在IE中一般用js:obj.onselectstart=function(){return false;};而firefox用CSS:-moz-user-select:none;罕见兼容问题:模板无忧--mb5u_COm1、DOCTYPE 影响 CSS 处置MB5U@COM2、FF:div 设置 margin-left, margin-right 为 auto 时已经居中,IE 不成3、FF: body 设置text-align 时,div 需要设置margin: auto(主要是margin-left,margin-right) 方可居中模板无忧--mb5u_COm4、FF: 设置 padding 后, div 会增加 height 和 width,但 IE 不会,故需要用 !important 多设一个 height 和 width模板无忧--mb5u_COm5、FF: 支持 !important, IE 则忽略,可用 !important 为 FF 非凡设置样式6、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV 一样高line-height:200px; 然后拔出文字,就垂直居中了.缺点是要控制内容不要换行MB5U@COM7、cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以8、FF: 链接加边框和布景色,需设置display: block,同时设置float: left 保证不换行.参照 menubar,给 a 和 menubar 设置高度是为了防止底边显示错位,若不设 height,可以在 menubar 中拔出一个空格.MB5U_COM9、在mozilla firefox和IE中的BOX模型解释纷歧致招致相差2px解决方法:MB5U@COMdiv{margin:30px!important;margin:28px;}注重这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但另外浏览器可以识别.所以在IE下其实解释成这样:div{maring:30px;margin:28px}IE5下MB5U_coMdiv{width:300px;margin:0 10px 0 10px;}div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}MB5U@COM关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持.11、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin 有值所以先界说ul{margin:0;padding:0;}注重事项:MB5U____COM1、float的div一定要闭合.MB5U____COM例如:(其中floatA、floatB的属性已经设置为float:left;)<#div id="floatB" > 模板无忧--mb5u_COm<#div id="NOTfloatC" >模板无忧-MB5u__com这里的NOTfloatC其实不希望继续平移,而是希望往下排.模板无忧--mb5u_COm模板无忧--mb5u_COm这段代码在IE中毫无问题,问题出在FF.原因是NOTfloatC其实不是float标签,必需将float标签闭合.MB5U_COM在<#div class="floatB">MB5U____COM<#div class="NOTfloatC">MB5U_COM之间加上<#div class="clear">mb5u---Com-模板无忧MB5U_coM这个div一定要注重声明位置,一定要放在最恰当的处所,而且必需与两个具有float属性的div同级,之间不能存在嵌套关系,否则会发生异常.而且将clear这种样式界说为为如下即可:.clear{模板无忧--mb5u_COm另外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;例如某一个wrapper如下界说:以下为引用的内容:.colwrapper{overflow:hidden;zoom:1;margin:5px auto;}设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.MB5U_coM解决方案例如:<#div id="imfloat">模板无忧-MB5u__commb5u---Com-模板无忧相应的css为MB5U_coM模板无忧-MB5u__com以下为引用的内容:#IamFloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}mb5u---Com-模板无忧3、关于容器的包容关系MB5U____COM4、关于高度的问题模板无忧--mb5u_COm假如是静态地添加内容,高度最好不要界说.浏览器可以自动伸缩,然而假如是静态的内容,高度最好定好.(似乎有时候不会自动往下撑开,不知道具体怎么回事)MB5U@COM模板无忧--mb5u_COm以下为引用的内容:.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 这句放置在另一句之上,上面已经提过 undefined undefinedCSS兼容IE与Firefox要点分析2006-10-15 14:43IE vs FFCSS 兼容要点:DOCTYPE 影响 CSS 处置FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不成FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方可居中FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用 !important 多设一个 height 和 widthFF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后拔出文字,就垂直居中了.缺点是要控制内容不要换行cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以FF: 链接加边框和布景色,需设置 display: block, 同时设置 float: left 保证不换行.参照 menubar, 给 a 和 menubar 设置高度是为了防止底边显示错位, 若不设 height, 可以在 menubar 中拔出一个空格XHTML+CSS兼容性解决方案小集使用XHTML+CSS构架好处很多,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的年夜家四处找^^1.在mozilla firefox和IE中的BOX模型解释纷歧致招致相差2px解决方法:div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但另外浏览器可以识别.所以在IE下其实解释成这样:div{maring:30px;margin:28px}重复界说的话依照最后一个来执行,所以不成以只写margin:XXpx!important;2.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不支持,如果有人理解的话,请告诉我一声,谢了!:)3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先界说ul{margin:0;padding:0;}就能解决年夜部份问题二、CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很年夜的解析不同,今天和年夜家谈谈火狐浏览器和IE浏览器下CSS兼容的问题,并推荐两篇不错的文章给年夜家:网页设计师必备的火狐扩展和 IE和火狐的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 为火狐特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后拔出文字,就垂直居中了.缺点是要控制内容不要换行7.{cursor: pointer 可以同时在IE、火狐中显示游标手指状,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;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中毫无问题,问题出在火狐浏览器.原因是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私有属性,用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;”!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的支持又有新问题.浏览器多了,网页兼容性更差。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

13. url encoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
ie: window.top.frameId或者window.top.frameName来访问这个window对象
mf: 只能这样window.top.frameName来访问这个window对象
另外,在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
<input/>
</table>
</form>
MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
MF中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)
11.const 问题
用 getElementById(idName) 代替 eval(idName)。
6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中,因为对象 id 不作为 HTML 对象的名称,所以可以使用与 HTML 对象 id 相同的变量名,IE 中不能。
(2)解决方法
在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用idName字符串取得对象的问题
(1)现有问题
在IE中,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象,在MF 中不能。
(2)解决方法
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:
不使用 const ,以 var 代替。
12. body 对象
MF的body在body标签没有被浏览器完全读入之前就存在,而IE则必须在body完全被读入之后才存在
</script>
此外,如果新代码中第一行不改,与老代码一样的话(即 gotoSubmit 调用没有给参数),则仍然只能在IE中运行,但不会出错。所以,这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题
(1)现有问题 Biblioteka 在 IE 中,HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
当然如果是在tpl中例外,因为tpl中符合xml规范,要求&书写为&
一般MF无法识别js中的&
14. nodeName 和 tagName 问题
(1)现有问题:
在MF中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值。在 IE 中,nodeName 的使用好象
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script>
新代码(可在IE和MF中运行):
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改
9. 在mf中,自己定义的属性必须getAttribute()取得
10.在mf中没有 parentElement parement.children 而用
parentNode parentNode.childNodes
又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
(3)其它
3. window.event
(1)现有问题:
使用 window.event 无法在 MF 上运行
然后用 mX 代替 event.x
(3)其它
yerX 在 IE 与 MF 中都有,具体意义有无差别尚未试验。
8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame,mf中不行
(2)解决方法
在frame的使用方面mf和ie的最主要的区别是:
(2)解决方法:
MF 的 event 只能在事件发生的现场使用,此问题暂无法解决。可以这样变通:
原代码(可在IE中运行):
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
childNodes的下标的含义在IE和MF中不同,MF使用DOM规范,childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时,IE和MF对parentNode的解释不同,例如
<form>
<table>
(1)现有问题:
在 IE 中,getElementsByName()、document.all[name] 均不能用来取得 div 元素(是否还有其它不能取的元素还不知道)。
如果在frame标签中书写了以下属性:
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面,那么可以这样访问
此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。
(3)其它
参见 问题4
7. event.x 与 event.y 问题
(1)现有问题
在IE 中,event 对象有 x, y 属性,MF中没有。
(2)解决方法
在MF中,与event.x 等效的是 event.pageX。但event.pageX IE中没有。
改用 document.formName.elements["elementName"]
(3)其它
参见 2
2. 集合类对象问题
(1)现有问题:
现有代码中许多集合类对象取用时使用 (),IE 能接受,MF 不能。
(2)解决方法:
改用 [] 作为下标运算。如:document.forms("formName") 改为 document.forms["formName"]。
以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox
1. document.form.item 问题
(1)现有问题:
现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行
(2)解决方法:
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。
如果要完全一样,可以稍麻烦些:
mX = event.x ? event.x : event.pageX;
相关文档
最新文档