兼容问题

HTML兼容

1.标准浏览器子元素不会撑开父元素设置好的宽度,IE6下会的;
2.IE6下,最小高度为19px;解决办法:overflow:hidden;
3.IE 6下,1px dotted #000不支持,解决办法:切背景平铺;
4.IE6下的文字溢出BUG
5.透明度;opacity:01;filter:alpha(opacity=0100);
6.圣杯布局:左右宽度固定,中间宽度自适应伸缩,并且中间先加载
7.img外部的border
产生条件:img外部有a标签,即img标签有链接时
解决办法:设置img边框border:0;
8.图片默认有边距
产生条件:img标签(每个img之后敲了回车)
解决办法:为img设置float的浮动布局方式。

JavaScript兼容性

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下则不能。解决方法:使用document.getElementById(“idName”)代替document.idName,最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义。

6、const问题说明:

Firefox下,可以使用const关键字或var关键字来定义常量,IE下,只能使用var关键字来定义常量。解决方法:统一使用var关键字来定义常量。

7、input.type属性问题说明:

IE下input.type属性为只读,但是Firefox下input.type属性为读写。解决方法:可以创建两个输入框,比如平时咱们有密码框,想通过把type为password的值改为text,IE下是不允许的。

8、 window.event问题说明:

window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用。Firefox必须从源处加入event作参数传递。IE忽略该参数,用window.event来读取该event。解决方法: var e = e || window.event;

9、event.x与event.y问题说明:

IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性。解决方法:使用var x = e.x ? e.x : e.pageX; 来代替IE下的event.x或者Firefox下的e.pageX;

10、event.srcElement问题说明:

IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target,请同时注意event的兼容性问题。

11、body问题说明:

Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在。

12、firefox与IE的父元素(parentElement)的区别说明:

IE支持parentElement和parentNode获取父节点,而FF只能使用后者。解决方法:统一使用parentNode;

13、innerText问题说明:

innerText在IE中能正常工作,但是innerText在FireFox中却不行. 需用textContent。解决方法:elem.innerText = elem.textContent = “值”

14、样式单位问题说明:

FireFox中设置HTML标签的style时,所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的。

15、样式关键字冲突问题说明:

CSS属性与JavaScript中的保留关键字命名相同,IE中style+属性,非IE中css+属性。

16、class属性冲突问题说明:

class属性冲突,class是javascript中的保留关键字。

17、年份获取问题说明:

使用getFullYear替换getYear。

18、for属性冲突问题说明:

lable标签的属性for冲突,在IE浏览器中getAttribute(“htmlFor”),在非IE浏览器中getAttribute(“for”)。19、removeChild和removeNode的问题说明:appendNode在IE和Firefox下都能正常使用,但是removeNode只能在IE下用,FF支持removeChild。

20、事件监听函数的问题说明:

标准浏览器的写法addEventListener()和IE的写法attachEvent()。解决方法:判断addEventListener是否存在,如果存在则用否则用IE8以下的版本(含IE8)的绑定方法attachEvent,removeEventListener()和detachEvent()也是一样的用法。

21、阻止事件冒泡说明:

stopPropagation()和cancelBubble,前者是方法,是标准的写法,后者是属性,赋值true表示阻止,是IE的写法。解决方法:判断stopPropagation是否存在,如果存在则用标准写法否则则用IE的写法,不可反过来判断。##22、阻止默认事件说明:
preventDefault()和returnValue()前者标准写法,后者IE写法。解决方法:一般情况建议直接使用return false阻止,但和取消默认事件的含义是不同的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容