js和css兼容IE和FF
1. js和css兼容IE和FireFox(FF)
2. css:
3. 1.
4. ul标签中FF中有个padding值，却没有margin值，而在IE中正好相反
5. 解决办法:将ul的padding和margin都设为0(也可以不是0)如：padding:0;margin:0;list-style:none;
6. 另外form默认在IE中也会有margin值，所以最好也将其margin和padding设为0
7.
8. 2.
9. ie中cursor:hand可以将鼠标设为手形，FF不行，
10. 解决：都用cursor:pointer
11.
12. 3、居中问题
13. ie需要将父窗口:text-align:center;而ff则是margin-left:auto;margin-right:auto;
14.
15. 4.IE和FF盒模型有区别，所以有需要特殊设置
16. IE Box的总宽度是： width+padding+border+margin宽度总和
17. FF Box的总宽度就是 width的宽度，padding+border+margin的宽度在含在width内。
18. FF: 支持 !important（优先解析）， IE 则忽略， 可用 !important 为 FF 特别设置样式
19. width:600px !important;//这个要放在前面才行
20. width:598px;
21. 另外：传说IE7会奇怪的支持!important，试过却不行;
22.
23. 5.
24. IE6中在设置float的div中margin会加倍，解决办法：div里面加上display:inline;
25.
26. 6.透明滤镜：
27. IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=30);
28. FF：opacity:0.3;
29. 或者：
30. IE：filter:alpha(opacity=60);
31. FF：-moz-opacity:0.6;/*已过时，用上面的opacity代替*/
32.
33. 7.禁用选择
34. IE:使用js，onselectstart="return false;";
35. FF:使用CSS，-moz-user-select:none;
36.
37. 8：圆角：
38. FF中：-moz-border-radius:4px;
39.
40. js:
41. 1.
42. IE中innerText在FF中没有，使用textContent;
43. eg:
44. var obj=document.getElementById("_td");
45. var text;
46. if(obj.innerText) {
47. text=obj.innerText;
48. } else if(obj.textContent) {
49. text=obj.textContent;
50. }
51. （DHTML手册说innerText不能用在tr，td等节点上，不过我之前明明用过的，然后昨天在测试别人的页面时用上面的方法IE取不到值，有哪位知道的希望告知下，在什么情况下不能使用innerText）
52. 2.
53. 在Ajax中返回对象状态IE可以使用readystate但是在FF中必须为readyState，所以最好是都写成readyState
54.
55. 3.获取IE和FF中的键盘返回值，<input type="text" onkeyUp="test(event)"/>
56. function test(e) {
57. var keyc=GetKeyCode(e);
58. alert(keyc);
59. }
60. function GetKeyCode(e) {//取得不同浏览器下的键盘事件值
61. var keyc;
62. if(window.event) {//ie键盘事件
63. keyc=e.keyCode;
64. } else if (e.which) {//火狐
65. keyc=e.which;
66. }
67. return keyc;
68. }
69.
70. 4.为对象添加移除事件
71. var obj=document.getElementById("_tname');
72. 添加事件:
73. if(obj.attachEvent) {
74. obj.attachEvent("onchange",function() {
75. otherfunction(params);//这里可以给其实方法传参，也可以直接调用其它方法
76. });
77. } else if(obj.addEventListener) {
78. obj.addEventListener("change",function() {
79. otherfunction(params);
80. },false);
81. }
82. 移除事件：
83. obj.onclick=null;
84. or
85. if(obj.detachEvent) {
86. obj.detachEvent("onchange",test);
87. } else if(obj.removeEventListener) {
88. obj.removeEventListener("change",test,false);
89. }
90.
91. 5.
92. IE中event.x和event.y
93. 在FF中只有event.pageX,event.pageY
94. 都有event.clientX和event.clientY属性
95. 解决办法：
96. var x=e.x?e.x:e.pageX;//e为event对象传进来的参数
97.
98. 6.IE下 input.type属性为只读，但是MF下可以修改
99.
100. 7.在 IE 中，getElementsByName()、(document.all[name] (还未测试成功))均不能用来取得 div元素（是否还有其它不能取的元素还不知道）。
101.
102. 8.通过js来触发事件
103. <script type="text/javascript">
104. function handerToClick(){
105. var obj=document.getElementById("btn1");
106. if(document.all){//IE中
107. obj.fireEvent("onclick");
108. } else {
109. var e=document.createEvent('MouseEvent');
110. e.initEvent('click',false,false);
111. obj.dispatchEvent(e);
112. }
113. }
114.
115. </script>
116. <input type="button" value="btn1" id="btn1" onclick=" alert('按钮btn1的click事件') " />
117. <input type="button" value="触发ID为btn1的onclick事件" onclick=" handerToClick() " />
118.
119. 9.IE下event对象有srcElement属性,Firefox下,event对象有target属性
120. e = e||window.event;
121. if(e==null)//当事件在iframe中时为空
122. e=window.top.document.parentWindow.event;
123. var obj=e.srcElement || e.target;
124.
125. 10.在FF中自己定义的属性必须getAttribute()取得
126.
127. 11.在FF3.0+，Ajax异步问题
128. var isFirefox=navigator.userAgent.indexOf("Firefox")>-1
129. xhr.onreadystatechange=((!isFirefox)?handler:handler());
130. xhr.open('GET',encodeURI(sUrl),bAsync);
131. xhr.send(null);
132. if(isFirefox) {
133. /*xhr.onreadystatechange=*/handler();
134. }
135.
136. 12.FF下没有insertAdjacentHTML问题
137. 两种解决办法，在如果在iframe中只能使用后一种：
138. ①
139. insertable:function(){//insertAdjacentHTML by BlueDestiny ^_^
140. if(document.body.insertAdjacentHTML){return;}
141. HTMLElement.prototype.insertAdjacentHTML = function(sWhere, sHTML){
142. var df = null,r = this.ownerDocument.createRange();
143. switch (String(sWhere).toLowerCase()) {
144. case "beforebegin":
145. r.setStartBefore(this);
146. df = r.createContextualFragment(sHTML);
147. this.parentNode.insertBefore(df, this);
148. break;
149. case "afterbegin":
150. r.selectNodeContents(this);
151. r.collapse(true);
152. df = r.createContextualFragment(sHTML);
153. this.insertBefore(df, this.firstChild);
154. break;
155. case "beforeend":
156. r.selectNodeContents(this);
157. r.collapse(false);
158. df = r.createContextualFragment(sHTML);
159. this.appendChild(df);
160. break;
161. case "afterend":
162. r.setStartAfter(this);
163. df = r.createContextualFragment(sHTML);
164. this.parentNode.insertBefore(df, this.nextSibling);
165. break;
166. }
167. };
168. }(),
169. ②
170. insertHtml:function(where, el, html){
171. where = where.toLowerCase();
172. if(el.insertAdjacentHTML){
173. switch(where){
174. case "beforebegin":
175. el.insertAdjacentHTML('BeforeBegin', html);
176. return el.previousSibling;
177. case "afterbegin":
178. el.insertAdjacentHTML('AfterBegin', html);
179. return el.firstChild;
180. case "beforeend":
181. el.insertAdjacentHTML('BeforeEnd', html);
182. return el.lastChild;
183. case "afterend":
184. el.insertAdjacentHTML('AfterEnd', html);
185. return el.nextSibling;
186. }
187. throw 'Illegal insertion point -> "' + where + '"';
188. }
189. var range = el.ownerDocument.createRange();
190. var frag;
191. switch(where){
192. case "beforebegin":
193. range.setStartBefore(el);
194. frag = range.createContextualFragment(html);
195. el.parentNode.insertBefore(frag, el);
196. return el.previousSibling;
197. case "afterbegin":
198. if(el.firstChild){
199. range.setStartBefore(el.firstChild);
200. frag = range.createContextualFragment(html);
201. el.insertBefore(frag, el.firstChild);
202. return el.firstChild;
203. }else{
204. el.innerHTML = html;
205. return el.firstChild;
206. }
207. case "beforeend":
208. if(el.lastChild){
209. range.setStartAfter(el.lastChild);
210. frag = range.createContextualFragment(html);
211. el.appendChild(frag);
212. return el.lastChild;
213. }else{
214. el.innerHTML = html;
215. return el.lastChild;
216. }
217. case "afterend":
218. range.setStartAfter(el);
219. frag = range.createContextualFragment(html);
220. el.parentNode.insertBefore(frag, el.nextSibling);
221. return el.nextSibling;
222. }
223. throw 'Illegal insertion point -> "' + where + '"';
224. }
225.
226. 13.FF下没有outerHTML问题：
227. if(typeof(HTMLElement)!="undefined" && !window.opera)
228. {
229. HTMLElement.prototype.__defineGetter__("outerHTML",function()
230. {
231. var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)
232. if(a[i].specified)
233. str+=" "+a[i].name+'="'+a[i].value+'"';
234. if(!this.canHaveChildren)
235. return str+" />";
236. return str+">"+this.innerHTML+"</"+this.tagName+">";
237. });
238. HTMLElement.prototype.__defineSetter__("outerHTML",function(s)
239. {
240. var r = this.ownerDocument.createRange();
241. r.setStartBefore(this);
242. var df = r.createContextualFragment(s);
243. this.parentNode.replaceChild(df, this);
244. return s;
245. });
246. HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
247. {
248. return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
249. });
250. }
251.
252. 14.访问css的float和class：
253. 由于float在JavaScript中是保留字，
254. IE：obj.style.styleFloat="left";
255. FF: obj.style.cssFloat="left";
256. 同理获取对象的class时(IE&FF:obj.className;)：
257. IE: obj.getAttribute("className");
258. FF: obj.getAttribute("class");
259.
260. 15.访问<label>的for属性
261. 同样，for在JavaScript中是保留字：
262. IE：obj.getAttribute("htmlFor");
263. FF: obj.getAttribute("for");
264.
265. 16.访问元素继承的样式：
266. IE：obj.currentStyle.width;
267. FF: document.defaultView.getComputedStyle(obj,null).width;
268.
269. 17.获取网页可见区域大小：
270. FF(包含滚动条的宽度和高度):
271. window.innerWidth;
272. window.innerHeight;
273. IE&FF(不包含滚动条)：
274. document.body.clientWidth;
275. document.body.clientHeight;
276.
277. 11.节点问题
278. IE中使用parentElement parement.children，而FF中使用parentNode parentNode.childNodes
279.
280. childNodes的下标的含义在IE和FF中不同，FF使用DOM规范，childNodes中会插入空白文本节点。
281.
282. FF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
283.
284. 12.
