JavaScript在IE和FireFox不同点(3)

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 代替 Internet Explorer，以 MF或FF代替 Mozzila Firefox

1：innerText

IE支持，FIREFOX不支持

解决办法：用innerHTML,2种浏览器都识别innerHTML

 

2：document.createElement

document.appendChild

在往表里插入行时

FIREFOX支持，IE不支持

解决办法：把行插入到TBODY中，不要直接插入到表

 

3：setAttribute('style','color:red;')

FIREFOX支持(除了IE，现在所有浏览器都支持)，IE不支持

解决办法：不用setAttribute('style','color:red')

而用object.style.cssText = 'color:red;'(这写法也有例外)

最好的办法是上面种方法都用上，万无一失 ^_^

4:class

setAttribute('class','styleClass')

FIREFOX支持，IE不支持(指定属性名为CLASS，IE不会设置元素的CLASS属性，相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性)

解决办法：

setAttribute('class','styleClass')

setAttribute('className','styleClass')

2种都用上（注：IE和FF都支持object.className）

 

5:用setAttribute设置事件

var obj = document.getElementById('objId');

obj.setAttribute('onclick','funcitonname();');

FIREFOX支持，IE不支持

解决办法：

IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数

如下：

var obj = document.getElementById('objId');

obj.onclick=function(){fucntionname();};

这种方法所有浏览器都支持

 

6：建立单选钮

IE以外的浏览器

var rdo = document.createElement('input');

rdo.setAttribute('type','radio');

rdo.setAttribute('name','radiobtn');

rdo.setAttribute('value','checked');

 

IE:

var rdo =document.createElement("<input type='radio' name='radiobtn' value='checked'>");

解决办法：

这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了

万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。

 

0：共同的一些技巧

在动态建立INPUT型输入元素时，一般是先加入，在设置TYPE。这就有可能出错

 

好习惯：var btn = document.createElement('input');

btn.setAttribut('type','button');

document.getElementById('formId').appendChild(btn);