js和css兼容IE和FF

thtwin · 发表于 2013-2-7 23:44:07

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"  />
117. <input type="button" value="触发ID为btn1的onclick事件"  />
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.

		自动登录	找回密码
密码			立即注册