2022年2022年浏览器兼容性 .pdf

《2022年2022年浏览器兼容性 .pdf》由会员分享，可在线阅读，更多相关《2022年2022年浏览器兼容性 .pdf（29页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、浏览器兼容性浏览器的内核Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( WebKit ) Google Chrome ( WebKit ) 腾讯 TT、世界之窗、 360 浏览器、遨游浏览器都是给IE 加了个外壳，不过如果电脑上装的是 ie8 的话， 这些浏览器还是调用ie7 的内核。 搜狗浏览器比较特殊，它有两种浏览模式：一是兼容模式，该模式使用IE 内核；二是高速模式，该模式使用 WebKit 内核。 解决 ie7 、 ie8 兼容性最好的办法是在head标签中加入 meta

2、 类型，只要 IE8 一读到这个标签 , 它就会自动启动 IE7 兼容模式CSS Hack 解决浏览器兼容性问题的主要方法是CSS hack。由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对 CSS 的解析认识不一样， 因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS ，让它能够同时兼容不同的浏览器， 能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫 CSS hack,也叫写 CSS hac

3、k。CSS Hack的原理是什么由于不同的浏览器对CSS的支持及解析结果不一样， 还由于 CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS 。比如 IE6 能识别名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 29 页 - - - - - - - - - 下划线 _ 和星号 * ， IE7 能识别星号 * ， 但不能识别下划线 _ ， 而 firefox两个都不能认识。等等各浏览器 CSS hack兼容表：IE6 IE7 IE8 Firefox

4、 Opera Safari !important Y Y Y Y Y _ Y * Y Y *+ Y 9 Y Y Y 0 Y nth-of-type(1) Y Y 如何解决浏览器的兼容性在 head 标签中加入 meta 类型， 这样就解决了 ie7 、 ie8 兼容问题。现在剩下 ie6 、ie7 、Firefox 、Chrome(Safari 与 Chrome使用同一内核 ) 、Opera 这几种浏览器的兼容性问题，我们需要使用CSS Hack来解决该问题。代码如下所示： 浏览器兼容性问题 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - -

5、- - - 名师精心整理 - - - - - - - 第 2 页，共 29 页 - - - - - - - - - .t1 color:#000000; /* 所有浏览器都支持此处填写 Firefox的 css*/ *color:#0000FF; /* ie6 id7 支持 此处填写 ie7 的 css*/ _color:#66CCCC; /* ie6支持此处填写 ie6 的 css*/ media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) .t1

6、color:#9900FF /* oprea支持此处填写 oprea 的 css*/ media screen and (-webkit-min-device-pixel-ratio:0) .t1color:#336600/* Chrome、Safari支持此处填写 Chrome的 css*/ ff、ie8 、ie7 、ie6 、oprea、Safari兼容性 css 书写模式 .t1 color:#000000; /* 所有浏览器都支持此处填写 Firefox的css*/ *color:#0000FF; /* ie6 id7 支持 此处填写 ie7 的 css*/ _color:#66CCC

7、C; /* ie6支持此处填写 ie6 的 css*/ /* oprea支持此处填写 oprea 的 css*/ media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 29 页 - - - - - - - - - .t1color:#CC66FF /* Chrome 、Safar

8、i支持 此处填写 Chrome的 css*/ media screen and (-webkit-min-device-pixel-ratio:0) .t1color:#336600 常见的浏览器兼容问题Css样式是与 DOCTYPE引入的 W3C/DTD 有关的，不同的 dtd 对 css 的解析也不同，我们现在统一使用 css 兼容问题：1. 默认的内外边距不同问题：各个浏览器默认的内外边距不同解决：*margin:0;padding:0; 2. 水平居中的问题问题：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整

9、理 - - - - - - - 第 4 页，共 29 页 - - - - - - - - - 设置 text-align: center ie6-7 文本居中，嵌套的块元素也会居中ff /opera /safari /ie8文本会居中，嵌套块不会居中解决：块元素设置1、margin-left:auto;margin-right:auto 2、margin:0 auto; 3、3. 垂直居中的问题问题：在浏览器中想要垂直居中，设置vertical-align:middle; 不起作用。 例如：ie6 下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会

10、垂直居中解决：给容器设置一个与其高度相同的行高line-height:与容器的 height 一样4. 关于高度问题问题：如果是动态地添加内容， 高度最好不要定义。 浏览器可以自动伸缩， 然而如果是静态的内容，高度最好定好。如果设定了高度，内容过多时，ie6 下会自动增加高度、其他浏览器会超出边框解决：1. 设置 overflow:hidden; 2. 高度自增 height:auto!important;height:100px; 5. IE6 默认的 div 高度名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理

11、- - - - - - - 第 5 页，共 29 页 - - - - - - - - - 问题：ie6 默认 div 高度为一个字体显示的高度，所在 ie6 下 div 的高度大于等于一个字的高度，因此在ie6 下定义高度为 1px 的容器，显示的是一个字体的高度解决：为这个容器设置下列属性之一1、设置 overflow:hidden; 2、设置 line-height:1px; 3、设置 zoom:0.08 6. IE6 最小高度 ( 宽度) 的问题问题：ie6 不支持 min-height 、min-width属性，默认 height 是最小高度， width 是最小宽度。解决：使用 ie

12、6 不支持但其余浏览器支持的属性!important。设置属性 min-height:200px; height:auto !important; height:200px; 7. td高度的问题问题：table 中 td 的宽度都不包含border 的宽度，但是 oprea 和 ff中 td 的高度包含了 border 的高度解决：设置 line-height和 height 一样。在 ie 中如果 td 中的没有内容， 那么border 将不会显示8. div嵌套 p 时，出现空白行问题：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - -

13、- - - 名师精心整理 - - - - - - - 第 6 页，共 29 页 - - - - - - - - - div 中显示 文本，ff 、oprea、Chrome ：top 和 bottom 都会出现空白行，但是在 ie 下不会出现空白行。解决：设置 p 的 margin:0px ，再设置 div 的 padding-top和 padding-bottom 9. IE6-7图片下面有空隙的问题问题：块元素中含有图片时， ie6-7 中会出现图片下有空隙解决：1、在源代码中让 和在同一行2、将图片转换为块级对象display:block; 3、设置图片的垂直对齐方式 vertical-a

14、lign:top/middle/bottom 4、改变父对象的属性， 如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： overflow:hidden;5、设置图片的浮动属性float:left; 10. IE6双倍边距的问题问题：ie6 中设置浮动，同时又设置margin 时，会出现双倍边距的问题例 float:left;width:100px;margin:0 100px;解决：设置 display:inline; 11. IE6 weidth为奇数，右边多出1px 的问题问题：父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1 像

15、素解决：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 29 页 - - - - - - - - - 将宽度的奇数值改成偶数12. IE6两个层之间 3px 的问题问题：左边层采用浮动，右边没有采用浮动，这时在ie6 中两层之间就会产生3 像素的间距解决：1、右边层也采用浮动 float 2、左边层添加属性 margin-right:-3px; 13. IE6 子元素绝对定位的问题问题：父级元素使用 padding 后，子元素使用绝对定位，不能精确定位解决：在子元素中设置

16、 _left:-20px; _top:-1px; 14. 显示手型 cursor:hand问题： ie6/7/8、opera 都支持但是 safari 、 ff 不支持解决：写成 cursor:pointer; (所有浏览器都能识别 ) 15. IE6-7 line-height失效的问题问题：在 ie 中 img 与文字放一起时， line-height不起作用名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 29 页 - - - - - - - - - 解决：都设置成

17、float 16. td自动换行的问题问题：Table 宽度固定， td 自动换行解决：设置 Table 的 table-layout:fixed，td 的 word-wrap:break-word 17. 子容器浮动后，父容器扩展问题问题：子容器都 float以后，父容器没有设定高度, 父容器将不会扩展解决：只需要添加一个 clear:both的 div ，代码如下： 子容器 a 子容器b 18. 透明 png图片会带背景色问题：在 ie6 下透明的 png 图片会带一个背景色解决：background-image: url(icon_home.png);/* 其他浏览器 */ backgr

18、ound-repeat: no-repeat; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 29 页 - - - - - - - - - _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=icon_home.png); /* IE6 */ _background-image: none; /* IE6 */ 19. list-style-position默认值的问题问题：ie 下 list-s

19、tyle-position默认为 inside, firefox默认为 outside 解决：css 中指定为 outside 即可解决兼容性问题20. list-style-image准确定位的问题问题： li前设置图片时，图片与其后的文字对齐问题解决：1、采用背景定位和 字符缩进的方法background:url() no-repeat left center; text-index:16px; 2、采用相对定位方法li 设置 list-style:url(); li的子元素 position:relative;top:-5px; 21. ul标签默认值的问题问题： ul标签在 ff 中默

20、认是有 padding 值的, 而在 ie 中只有 margin 有值解决：定义 ulmargin:0;padding:0;就能解决大部分问题22. IE中 li指定高度后，出现排版错误问题：在 ie 下如果为 li指定高度可能会出现排版错位名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 29 页 - - - - - - - - - 解决：设置 line-height 23. ul或 li浮动后，显示在 div 外问题：div 中的 ul 或 li设置 float以后，

21、都不在 div 中解决：必须在 ul 标签后加 来闭合外层 div 24. ul浮动后， margin 变大问题：ul 设置 float后，在 ie 中 margin 将变大解决：设置 ul 的 display:inline，li的 list-style-position:outside 25. li浮动后， margin 变大问题：li设置 float后，在 ie 中 margin 将变大解决：设置 li的 display:inline 26. 嵌套使用 ul 、li的问题问题：ie 的 bug， 嵌套使用 ul 、 li时， 里层的 li设置 float以后， 外层 li不设置 float

22、, 里面的 ul 顶部和它外面的 li总是有一段间距解决：设置里面的 ul 的 zoom:1 27. IE6-7 li底部有 3px 的问题问题：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 29 页 - - - - - - - - - 这个 bug产生的充要条件是li的子元素浮动并且li设置了以下 CSS 属性之一： width 、height 、zoom 、padding-top 、padding-bottom 、margin-top 、margin-bottom

23、 。解决：1、div 设置 clear:left|both，这时 li不能设置 width 、height 、zoom 。2、li设置 float:left，这时 li可以设置 width 、height 、zoom 。3、li设置 clear:left|both，这时 li不能设置 width 、height 、zoom 。4、IE6/IE7 的这个 Bug可以通过给 li中的 div 设置vertical-align:top|middle|bottom解决。28. IE6 垂直列表间隙的问题问题：li中有 a 且设置 display:block时，ie6 中列表间会出现空隙解决：1、li中

24、加 display:inline; 2、li使用 float 然后 clear:both; 3、给包含的文本末尾添加一个空格4、设置 width 29. IE6 列表背景颜色失效的问题问题：当父元素设置 position:relative;时，在 ie6 中第一个 ul 、ol 、dl 的背景颜色失效解决：ul 、ol 、dl 都设置为 position:relative; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 29 页 - - - - - - - - - 3

25、0. IE6-7 列表背景颜色失效的问题2问题：做横向导航栏时， ul 设置为 float且有背景色， li设置为 float 。ie6-7 背景颜色失效解决：很多 ie 的 bug 都可以通过触发 layout来解决 ul 添加属性1、height:1%; 2、float:left; 3、zoom:1; 31. 列表不能换行的问题问题： li设置为浮动，后面的li紧随其后，不能换行解决：1、为这个 ul 定义合适的宽高2、给包含这个 ul 的父 div 定义合适的宽高。32. li中的内容以省略号显示问题：li中内容超过长度时， 想以省略号显示， 此方法适用于 ie6-7-8 、 opera

26、、 safari浏览器ff 浏览器不支持解决：liwidth:200px; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 29 页 - - - - - - - - - 33. 超链接访问过后 hover 样式不出现的问题问题：点击超链接后， hover、active样式没有效果解决：改变 CSS

27、 属性的排列顺序 : L-V-H-A 34. 禁用中文输入法的问题问题：不能在输入框中输入汉字解决：只在 ie 系列 和 ff 中有效ime-mode:disabled ( 但可以粘贴 )禁用粘贴：onpaste=return false 35. 除去滚动条的问题问题：隐藏滚动条解决：1、只有 ie6-7 支持 2、除 ie6-7 不支持 bodyoverflow:hidden 3、所有浏览器htmloverflow:hidden 36. 让层显示在 FLASH 之上问题：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心

28、整理 - - - - - - - 第 14 页，共 29 页 - - - - - - - - - 想让层的内容显示在flash上解决：把 FLASH 设置透明1、 2、 37. 去除链接虚线边框的问题问题：当点击超链接后， ie6/7/8 ff会出现虚线边框 , 而 opera、safari没有虚线边框解决：ie6/7 中 设置为 a blr:expression(this.onFocus=this.blur() ie8 和 ff 都不支持 expression 在 ie8 、ff 中设置为 :focus outline: none; 38. css滤镜的问题问题：css 滤镜只在 ie 中有

29、效， Firefox, Safari(WebKit), Opera只能够设置透明，它们不支持滤镜filter，无法实现图片切换中间变换的效果，只能通过透明度来设置。解决： ff中设置透明度 -moz-opacity:0.10; opacity:0.6; ie 中只设置 filter:alpha(opacity=50); 时，ie6-7 失效，还要设置1、zoom:1; 2 、width:100%; 39. IE6背景闪烁的问题名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，

30、共 29 页 - - - - - - - - - 问题：链接、按钮用 CSS sprites作为背景，在 ie6 下会有背景图闪烁的现象。原因是 :IE6 没有将背景图缓存，每次触发hover 的时候都会重新加载解决：可以用 JavaScript设置 ie6 缓存这些图片：document.execCommand(BackgroundImageCache ,false,true); 40. 出现重复文字的问题问题： 这就是多出来的那只猪解决：1、改变结构，不出现【一个容器包含2 两个具有“ float ”样式的子容器】的结构。2、减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于33

31、、去掉所有的注释。4、修正注释的写法。 这里是注释内容 5、在第二个容器后面加一个或者多个来解决。41. ff、chrome绝对定位无效问题：在 IE 给 td 设置 position:relative，然后给它包含的一个容器使用position:absolute进行定位是有效的，但在FF和 Chrome下却不可以。解决：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 29 页 - - - - - - - - - 设置 td 的 display:block。42. IE

32、6 绝对定位的问题问题： dovapour 内容 解决：left的定位错误问题1、给父层设置 zoom:1 触发 layout 。2、给父层设置宽度width bottom 的定位错误问题1、给父层设置 zoom:1 触发 layout 。2、给父层设置高度height 43. 子容器宽度大于父容器宽度时，内容超出问题：子 DIV 的宽度和父 DIV 的宽度都已经定义， 在 IE6 中如果其子 DIV 的宽度大于父DIV 的宽度，父 DIV 的宽度将会被扩展，在其他浏览器中父DIV 的宽度将不会扩展，子 DIV 将超出父 DIV 解决：设置 overflow:hidden，子 DIV将不会超出

33、父 DIV。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 29 页 - - - - - - - - - 44. float的 div 闭合的问题问题：例如：这里的 NOTfloatC 并不希望继续平移，而是希望往下排。( 其中 floatA 、floatB的属性已经设置为 float:left;) 这段代码在 IE 中毫无问题，问题出在其他浏览器中。原因是NOTfloatC 并非float标签，必须将 float标签 闭合。解决：在 之间加上 这个 div 一定要注意

34、位置，而且必须与两个具有float属性的div 同级，之间不能存在嵌套关系，否则会产生异常。并且将clear 这种样式定义为为如下即可： .clear clear:both; 45. 单选框、复选框与后面的文字对不齐问题：单选框、复选框与后面的文字对不齐。解决：.alignfont-size:12px; .align input display:block; float:left; .align label display:block; float:left; padding-top:3px; *padding-top:5px; 需注意的问题：1. 设置 padding 后高度和宽带都会增加说

35、明：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 29 页 - - - - - - - - - 除了 ie5.5 ，其他所有浏览器中，设置padding 以后高度和宽带都会增加2. 使用 XHTML 1.0 Transitional后， div 宽度说明：在使用 XHTML 1.0 Transitional以后 div 宽度都不包含 border 的宽度了，设置宽度的时候需要注意下。3. 外层相对定位，内层绝对定位说明：ie6 下， 外层 div 的 postion:

36、 relative， 并设置 text-align， 内层 div 的 postion: absolute ，这时内层的位置是相对于text-align而言的例如： position:relative position:absolute 4.   显示的大小不一致说明：默认字本显示问题，导致 显示的大小不一致，在ie 下比较小一点，其他的浏览器都一致，当你使用了 造成问题时请注意。5. 边框重叠说明说明：为 table 、td 都指定了边框后， 然后使用 border-collapse:collapse让边框重叠，可以看出在发生重叠时，Firefox 是用 td

37、覆盖 table 的，而 IE 是用table 覆盖 td 的。使用时候需要注意。6. 设置 td padding的说明名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 29 页 - - - - - - - - - 说明：设置 td 的 padding 以后高度和宽带都会增加,padding-left和 padding-right的效果都一样增加了td 的宽带，但是 padding-top和 padding-bottom的效果不一样。最好不要使用td 的 ding-top

38、和 padding-bottom 7. ul设置的说明说明：ul 一般设置： list-style-type:none;margin:0px;padding:0px；li一般设置：list-style-type:none; list-style-position:outside 8. 使一个层垂直居中于浏览器中说明：使用百分比绝对定位 , 与外补丁负值的技巧 , 负值的大小为其自身宽度高度除以二div position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:

39、1px solid red; 9. 万能 float 闭合说明：可以用这个解决多个div 对齐时的间距不对，将以下代码加入 Global CSS 中,给需要闭合的 div 加上 class= ”clearfix” 即可 /* Clear Fix */ .clearfix:after content:.;display:block;height:0; clear:both; visibility:hidden; .clearfix 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20

40、页，共 29 页 - - - - - - - - - display:inline-block; /* Hide from IE Mac */ .clearfix display:block; /* End hide from IE Mac */ /* end of clearfix */ 10. 触发 layout说明：IE6 中很多 Bug都可以通过触发 layout 得到解决 . 下列的 CSS属性或取值会让一个元素获得 layout ：position:absolute 绝对定位元素的包含区块(containing block)就会经常在这一方面出问题float:left|right

41、由于 layout元素的特性，浮动模型会有很多怪异的表现display:inline-block 当一个内联级别的元素需要layout的时候就往往符用到它，这也可能也是这个CSS属性的唯一效果 - 让某个元素有 layout width: 除 auto 外的任何值height: 除 auto 外的任何值zoom: 除 auto 外的任何值11、如何使连续长字段自动换行ff 最新版本 word-wrap:break-word;就可以了ff 旧版本还要使用 javascript完成文字换行div width:300px; word-wrap:break-word;名师资料总结 - - -精品资料欢

42、迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 21 页，共 29 页 - - - - - - - - - border:1px solid red; function toBreakWord(intLen) var obj=document.getElementById(ff); var strContent=obj.innerHTML; var strTemp=; while(strContent.lengthintLen) strTemp+=strContent.substr(0,intLen)+ s

43、trContent=strContent.substr(intLen,strContent.length); strTemp+= +strContent; obj.innerHTML=strTemp; if(document.getElementById & !document.all) toBreakWord(37) 12、设置滚动条颜色只对 ie 系列有效在 html 中 而不是设置 body html scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeee

44、ee; scrollbar-3dlight-color:#eeeeee; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 22 页，共 29 页 - - - - - - - - - scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; IE 不支持 float：inherit overflow:hidden有 2个用法，一个是隐藏溢出，另一个是清除浮动。, ,

45、, , 和 是块元素的 例子, , , , , 和 是 inline元素 这行代码放在 body 中，去掉了页面鼠标右键快捷菜单，达到防止图片另存为的目的。javascript部分1. document.form.item 问题问题：代码中存在 document.formName.item(itemName) 这样的语句，不能在FF下运行解决方法：改用 document.formName.elementselementName 2. 集合类对象问题问题：代码中许多集合类对象取用时使用() ，IE 能接受， FF不能解决方法：改用 作为下标运算，例：名师资料总结 - - -精品资料欢迎下载 -

46、- - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 23 页，共 29 页 - - - - - - - - - document.getElementsByName(inputName)(1) 改为document.getElementsByName(inputName)1 3. window.event问题：使用 window.event 无法在 FF上运行解决方法：FF的 event 只能在事件发生的现场使用， 此问题暂无法解决。 可以把 event 传到函数里变通解决：onMouseMove = functionName(ev

47、ent) function functionName (e) e = e | window.event; . 4. HTML 对象的 id 作为对象名的问题问题：在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能解决方法：使用对象变量时全部用标准的 getElementById(idName) 5. 用 idName 字符串取得对象的问题问题：在 IE 中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在 FF中不能解决方法：用 getElementById(idName) 代替 eval(idNam

48、e) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 24 页，共 29 页 - - - - - - - - - 6. 变量名与某 HTML 对象 id 相同的问题问题：在 FF中，因为对象 id 不作为 HTML 对象的名称， 所以可以使用与 HTML 对象 id 相同的变量名， IE 中不能解决方法：在声明变量时，一律加上 var ，以避免歧义，这样在IE 中亦可正常运行最好不要取与 HTML 对象 id 相同的变量名，以减少错误7. event.x 与 event.y 问题问题

49、：在 IE 中，event 对象有 x,y 属性， FF中没有解决方法：在 FF中，与 event.x 等效的是 event.pageX ，但 event.pageX IE中没有故采用 event.clientX 代替 event.x ，在 IE 中也有这个变量event.clientX 与 event.pageX 有微妙的差别，就是滚动条要完全一样，可以这样：mX = event.x ? event.x : event.pageX; 然后用 mX 代替 event.x 8. 关于 frame问题：在 IE 中可以用 window.testFrame 取得该 frame，FF中不行解决方法：w

50、indow.top.document.getElementById(testFrame).src = xx.htm window.top.frameName.location = xx.htm 9. 取得元素的属性在 FF中，自己定义的属性必须 getAttribute() 取得名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 25 页，共 29 页 - - - - - - - - - 10. 在 FF中没有 parentElement ，parement.children 而用 pa