IE和FireFox兼容问题

来源：互联网发布：macbookair软件必备编辑：程序博客网时间：2024/06/10 02:40

IE和FireFox兼容JS问题

1. document.form.item 问题
(1)现有问题：
      现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行
(2)解决方法：
      改用 document.formName.elements["elementName"]
(3)其它
      参见 2

2. 集合类对象问题
(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 gotoSubmit(evt) {
                  evt = evt ? evt : (window.event ? window.event : null);
                  ...
                  alert(evt);          // use evt
                  ...
            }
         </script>
      此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

4. HTML 对象的 id 作为对象名的问题
(1)现有问题
      在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
      用 getElementById("idName") 代替 idName 作为对象变量使用。

5. 用idName字符串取得对象的问题
(1)现有问题
      在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
      用 getElementById(idName) 代替 eval(idName)。

6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
      在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
(2)解决方法
      在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
      此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
(3)其它
      参见问题4

7. event.x 与 event.y 问题
(1)现有问题
      在IE 中，event 对象有 x, y 属性，MF中没有。
(2)解决方法
      在MF中，与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
(3)其它
      event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。

8. 关于frame
(1)现有问题
      在 IE中可以用window.testFrame取得该frame，mf中不行
(2)解决方法
      在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
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’文章
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改

9. 在mf中，自己定义的属性必须getAttribute()取得

10.在mf中没有 parentElement parement.children  而用
            parentNode parentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
  一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时，IE和MF对parentNode的解释不同，例如
<form>
<table>
      <input/>
</table>
</form>
MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点

  MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

11.const 问题
  (1)现有问题:
   在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
  (2)解决方法:
   不使用 const ，以 var 代替。

12. body 对象
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

13. url encoding在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&

14. nodeName 和 tagName 问题
  (1)现有问题：
   在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
   有问题（具体情况没有测试，但我的IE已经死了好几次）。
  (2)解决方法：
   使用 tagName，但应检测其是否为空。

15. 元素属性
IE下 input.type属性为只读，但是MF下可以修改

16. document.getElementsByName() 和 document.all[name] 的问题
  (1)现有问题：
   在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。

17. DOM 数据岛的问题

(1)现有问题
在IE中, <xml>标签具有特殊意义, 可以内含XML DOM, 并能实现与HTML组件的数据    绑定. 在MF中,<xml>则仅仅是一个未知的标记而已.    另外, 对 IE 来说, <xml>实际意味着这里是一个ActiveX对象, 但它却挂在HTML本    身的DOM树下作为一个节点, 因而会对DOM树的遍历造成严重影响.

(2)解决方法
IE的数据绑定机制是可以用JS来模拟的, 但是太麻烦, 建议不使用数据绑定机制或者    寻找实现这种模拟的库来做. 我们只讨论如何实现DOM的兼容.    在MF中无论已知的HTML标记还是其它符合XML规范的标记, 都是用统一的DOM树来处理的, 因此, MF事实上完全可以使用DOM数据岛, 但与IE小小的不同在于: 在IE中<xml>    是个 DOM document, 而在MF只是 DOM node. 这个差别通常不足为患.    但是有一个小小的细节, 为了兼容HTML相当随意的语法, MF无法识别简写的空标记.    如: <xml id="xx"><book><title>xxxx</title><content/><index/></book></xml>,    这其中<content/>和<index/>是简写形式的, 会使MF无法识别, 应当写成:       <content></content><index></index>    不过, 我怀疑如果用XHTML, 可能就没有这种问题. 但我还没有试过.    对于IE中<xml>干扰HTML的DOM结构问题, 我现在的方法是处理完毕后把它从HTML的    DOM中删除. 不知道还有没有更好的解.

DIV+CSS网页中IE和火狐兼容问题的整理 (2008-06-28 00:04:56)

标签：爱在中国行 it

分类：电脑园地

DIV+CSS构建网站时常会出现浏览器不兼容的问题，下面整理了一些常见不兼容问题，及解决办法！

1、用!important解决IE和Mozilla的布局差别

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权，最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式：

.colortest{ border:20pxsolid#60A179!important; border:20pxsolid#00F; padding:30px; width:300px;}

在Mozilla中浏览时候，能够理解!important的优先级，因此显示#60A179的颜色；在IE中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色。

2、解决超链接访问过后hover样式不显示的问题

改变CSS属性的排列顺序: 先后顺序标准应为：a:link—a:visited—a:hover—a:active

3、Li中内容超过长度后以省略号显示的方法

4、margin和padding定义尺寸的缩写

margin:3px——表示所有边都是3px；
margin:3px  5px—— 表示top和bottom的值是3px ,right和left的值是5px
margin:3px  5px 7px——表示top的值是3，right和left的值是5，bottom的值是7
margin:3px  5px 7px 5px——四个值依次表示top,right,bottom,left；上右下左。

5、解决IE不能正确显示透明PNG——header内加入代码

程序代码

6、ul在Firefox和IE下表现不同
使用（padding:0; margin:0; list-style:inside;）或者（padding:0; margin:0; list-style:none;）实现兼容，参考地址：http://and8.net/article.asp?id=273

7、BOX模型在firefox和IE中的解释相差2px的解决方法

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反。根据上面提到的IE并不支持!important，所以在IE下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

8、margin的默认效果
div里的内容，ie默认为居中，而ff默认为左对齐。使ff内容居中的方法是增加代码margin:auto;

出之：http://blog.163.com/wangsen_315/blog/static/9461414200821310584953/

之前找了几个不同版本的可独立运行的IE浏览器，正好拿来试试页面的兼容性问题。不试不知道，在IE6和FF中没问题的页面在IE5和IE5.5中乱成一团，一直听说IE5是WEB标准制作的一个“钉子户”，现在不得不相信了。

既然有问题，那就找找解决的方法咯，在网上一搜，相关的文章还是不少的，觉得最直接的方法还是“IE条件注释”，很方便的就能为IE的不同版本写样式。但这样就得为每个版本写一个样式，不利于文件的优化。

找了一些相关的CSS HACK后，觉得应该可以把IE5/IE5.5/IE6/FF的HACK写到一起的，经过测试，终于找到了一个不错的方法，下面我们来看看怎么实现：
大家都知道用!important声明可以提升指定样式规则的应用优先权，如下面的例子：

E1{
background-color: red !important;
background-color: blue;
}

但这样写在IE中会有个问题，看过我的《关于CSS样式表优先级》和《关于CSS样式表优先级补遗》，你会知道在IE6和FF中用! important声明可以提高优先级别，但在IE6中的!important声明并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。根据这一点，我们就可以把FF和IE的样式分离开。
OK ，解决了FF和IE的问题，现在来解决IE自己的问题。

看过了嘟嘟的《绕过IE6支持IE5的别一种写法-IE也支持">"》后有感而发，使用“＞”IE是否真的可以认得？我们来看个例子：

E1{
background-color: red;
＞background-color: blue;
}

在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“＞”，则应该得到的蓝色的背景，因此可以知道“＞”只有IE可以识别，这点是很重要的哦！在后面大家就会知道了。（注：我测试过其它的一些符号，如“~”、“`”、“＜”等，都只有IE可以识别，在此为了感谢嘟嘟，推荐使用“＞”）

我们再来看个例子：

E1{
＞background-color: black;
＞background-color : green;
}

这个例子在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了，来看看例子：

E1{
＞background-color: red;
}
E1{
＞background-color: black;
}

这里我们又用到一个HACK，就是“E1{}”，这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是，在IE5中的背景色为红色；在IE5以上版本中得到的是黑色背景。
终于把不同版本的浏览器都分离出来了，这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：

E1{
width: 500px;
height: 50px;
background-color: red !important;
background-color: blue;
text-align:center;
}
E1{
＞background-color: black;
＞background-color : green;
}

需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“＞”，因为“E1{}”这个HACK在FF中可以识别。也许你会想，上面的例子不是可以写成：

E1{
width: 500px;
height: 50px;
background-color: red;
＞background-color: blue;
text-align:center;
}
E1{
＞background-color: black;
＞background-color : green;
}

这样不就又可以省下几个字节？是没错，可是HACK不是标准，如果滥用HACK，那只会离标准越来越远！

出之：http://blog.ifeng.com/article/803775.html

图文混排容易导致扩展框问题.

扩展框问题

这样排版容易导致扩展框问题.

尽量定义宽高给定值

* 浮动下降问题

加上｛float：left；｝即可```

IE6的双倍边距BUG

解决办法是加上display:inline

IE6下为什么图片下方有空隙产生

解决这个BUG的方法也有很多，可以是改变html的排版，或者设置img 为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.

IE6下这两个层中间怎么有间隙

这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left

如何对齐文本与文本输入筐

遇到此种问题，设置文本框的 vertical-align:middle 就可以了

为什么FF下文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

{

height:auto!important;

height:200px;

min-height:200px;

}

怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明或者

怎样使一个层垂直居中于浏览器中

使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二.

方法二:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，

只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

{

width:300px;

margin-left:auto;

margin-right:auto;

}

针对firefox ie6 ie7的css样式

现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，

但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针

对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：

#1 { color: #333; }

* html #1 { color: #666; }

*+html #1 { color: #999; }

那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，

而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到标签下，然后为div指定一个类：

然后CSS这样设计：

#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

最狠的手段 - !important;

如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.

关于容器的包涵关系

很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

1.写两句代码来控制一个属性，区别Firefox与IE：

background:orange; *background:green;

//这一句代码写出来时，你用Firefox浏览，会发现背景是橙色的，而IE里却是绿色的，很简单，因为Firefox不能识别*，而IE6，IE7都可以识*,标准浏览器(如Firefox,Opera,Netscape)不能识别*;。

2.写两句代码来控制一个属性，区别IE7与IE6：

background:green !important;background:blue;

//这一句代码写出来时，你用IE7浏览，会发现，写了该代码的区域背景是绿色的，如果用IE6浏览，却是蓝色的，这是因为IE7能识别!important*，一但识别了，就执行，忽略了后面的那一句，但IE6却不能识别!important，所以前面部分跳过，直接执行了后半部份.

3.写三句代码来控制一个属性，区别Firefox，IE7，IE6：

background:orange;*background:green !important;*background:blue;

//这一句会使在Firefox在，背景呈橙色，IE7中为绿色，IE6中为蓝色，道理和前面一样，Firefox不能识别*，所以后面两句都不执行，直接执行第一句，IE7当然也能执行第一行代码，但是因为第二句，他也能识别，所以就执行了第二句代码，把前面的效果给过滤了，而最后一句，IE7是不能识别的。IE6不能识别!imprtant，本来运行了第一句代码了，第二句不能识别，那就理所当然的执行了最后一句。

注：IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*；IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;FF不能识别*，但能识别!important;

出之：http://www.5ilog.com/cgi-bin/sys/link/view.aspx/6264648.htm

CSS 兼容要点：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 和 width

FF: 支持 !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解决方法：