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

8.window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法:
IE:
<input name="Button8_1" type="button" value="IE" οnclick="javascript:gotoSubmit8_1()"/>
...
<script language="javascript">
function gotoSubmit8_1() {
...
alert(window.event); //use window.event
...
}
</script>
IE&Firefox:
<input name="Button8_2" type="button" value="IE" οnclick="javascript:gotoSubmit8_2(event)"/>
...
<script language="javascript">
function gotoSubmit8_2(evt) {
...
evt=evt?evt:(window.event?window.event:null);
alert(evt); //use evt
...
}
</script>

9.event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

10.event.srcElement问题
说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.

11.window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.

12.模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。

如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

13.frame问题
以下面的frame为例：
<frame src="xxx.html" id="frameId" name="frameName" />

(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
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的内容.

如果需要将frame中的参数传回父窗口，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";

14.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.

例如：
Firefox：
<body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox：
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>

15. 事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现

Firefox：document.body.onload = inject();

有人说标准是：

document.body.οnlοad=new Function('inject()');

16. firefox与IE(parentElement)的父元素的区别
IE：obj.parentElement
firefox：obj.parentNode

解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

17.cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer

解决方法: 统一使用pointer

18.innerText在IE中能正常工作，但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element').innerText = "my text";

} else{

document.getElementById('element').textContent = "my text";

}

19. FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：

obj.style.height = imgObj.height + 'px';

20. ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。

解决方法：

//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

21. padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,

必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

22. 消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效

23. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。

FF：opacity:0.6。

24. 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;。

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、Firefox、Opera页面呈现异同(转载)相关推荐

  1. 关于IE、Firefox、Opera页面呈现异同 (转于纯蓝)

    1.document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName&qu ...

  2. [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器...

    [完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器 原文:[完美]原生JS获取浏览器版本判 ...

  3. 别再问我“输入URL到页面呈现”啦

    第1篇: 能不能说一说浏览器缓存? 缓存是性能优化中非常重要的一环,浏览器的缓存机制对开发也是非常重要的知识点.接下来以三个部分来把浏览器的缓存机制说清楚: 强缓存 协商缓存 缓存位置 强缓存 浏览器 ...

  4. css 自定义字体 Internet Explorer,Firefox,Opera,Safari

    FROM: https://developer.mozilla.org/ja/CSS/@font-face http://nicewebtype.com/notes/2009/10/30/how-to ...

  5. 浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

    浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer CSS Hack 是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的 ...

  6. 每天一道面试题 浏览器输入URL到页面呈现详细过程

    浏览器输入URL到页面呈现过程 1.当用户敲下回车的那一刻,浏览器会判断用户输入的是ip地址还是域名 2.如果是ip地址就直接访问,否则就会先解析域名 3.域名的解析会先从浏览器缓存中去查询,是否有之 ...

  7. 在地址栏上输入一个url，到这个页面呈现出来，中间会发生什么？

    在地址栏上输入一个url,到这个页面呈现出来,中间会发生什么? 查缓存 DNS 解析 TCP 连接 发送 HTTP 请求 服务器处理请求并返回 HTTP 报文 浏览器解析渲染页面 连接结束 o 首先在 ...

  8. 从输入网址到页面呈现的详细过程

    从输入网址到页面呈现的详细过程 面试题经典题目,简要回答如下: a.域名解析 b.发起TCP连接的三次握手 c.建立TCP连接后发起http请求 d.服务端响应http请求,返回响应报文 e.浏览器页 ...

  9. 如何修改页面呈现哀悼模式？

    如何修改代码? 代码里怎么做的,使页面呈现哀悼模式??(其实是早上我司UI设计师跑来拿我电脑说我给你表演个哀悼) html {filter: grayscale(1); } filter:graysc ...

最新文章

  1. 第3章 NFS基本应用
  2. Linux uptime 命令详解
  3. cad vba编程从入门到精通_【CAD教程】CAD2020零基础入门到精通全套视频教程
  4. JavaScript中的类方法、对象方法、原型方法
  5. Hybrid App是如何实现网页语言与程序语言的混合？谁占主体？
  6. Mac Xdebug安装时遇到了Zend Engine API 不一致的问题
  7. fiddler——一款莱斯的抓包工具
  8. linux运行火车头采集,网站抓取精灵火车采集器如何定时自动运行？
  9. NFC匹配电路与滤波器设计
  10. 【性能优化实战】日语java开发相关词汇
  11. 运放噪声频率曲线-运放噪声计算-运算放大器
  12. 【新征程】1、考研路漫漫
  13. 全志平台BSP裁剪（3）附件二 Kernel hacking配置说明
  14. 云南计算机专升本经验分享
  15. Linux下如何切换用户(转）
  16. 后端常用数据库的使用MongoDB, Redis, Mysql
  17. ​Web前端剪切板文本分享到文件发送
  18. 关于@yahoo.cn
  19. 一种自适应的红色章印去除算法
  20. 美团饿了吗CPS红包，别人领红包下单，你拿推广佣金(送源码)

热门文章

  1. webpack5的tree-shaking值得了解
  2. java的oracle事务回滚_Oracle事务处理
  3. php微信使用腾讯地图进行定位,微信定位+腾讯地图导航
  4. 最简单的图形用户代码_简单几句代码，画出精美的图形，快跟着学起来~
  5. android里build报错怎么办,Android Studio 当build时候出错解决办法
  6. 霍夫曼编码PHP,数据结构：哈夫曼编码（php版）
  7. win7 32 php+mysql+apache环境_win7 搭建PHP环境（php+mysql+apache）
  8. mysql 参照完整性规则_MySQL存储引擎你们知道多少？
  9. 传送大文件到服务器,大文件传送服务器
  10. 利用WinRar压缩和解压缩文件