`
- 浏览:
161272 次
- 性别:
- 来自:
成都
-
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.
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
IE与FF的兼容问题 IE浏览器和火狐浏览器兼容问题——CSS篇 IE浏览器和Firefox(火狐)浏览器兼容性——Javascript篇
FF与IE对javascript和CSS的区别,不同浏览器兼容问题总结
DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格(用DIV+CSS做的表格像素表格) 内容不多但是绝对实用,其实在做数据显示时还是推荐用表格,因为不是所有的地方数据显示有用DIV+CSS,在数据...
Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3、FF:...
javascript图片完全固定在左右2边,最重要的是完全兼容IE6,拖动滑动条时没有闪动的效果。FF,IE6,IE7,IE8的效果完全一致。IE6对fixed是不兼容的,但这个案例很好的解决了这个问题,(主要看CSS的设置)
1. 超链接访问过后hover样式就不出现的问题 ... FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决 Code: <style type="text/css"> <
ie和火狐的兼容问题总结了火狐(FF)浏览器与IE在css和js中的不同之处,完美的解决各位在工作中遇到的技术困难
最小高度能自适应高度IE.FF全兼容的div设置
有js+css和jquery+css实现的弹出居中的遮罩层,兼容IE6 7 8 和ff
这里给大家分享的是项目中的一个小需求,本来很简单,可是整了好久才把FF的兼容性搞定。 <!DOCTYPE ...
火狐与IE浏览器之间的一些差别收集 一、IE与FireFox的js和css 二、IE6/IE7和Firefox对Div处理的差异 三、CSS完美兼容IE6/IE7/FF的通用方法
织织网应实际使用开发的一个js年月选择器,采用原生js开发,兼容IE、FF(Firefox)、谷歌(Chrome),其他杂牌浏览器都是基于这三种内核的,就不一一测试了。 插件非常的简单,完全开源,可以做二次开发。 因为很...
5. FF和IE BOX模型解释不一致导致相差2px 3 6. IE5 和IE6的BOX解释不一致 3 7. ul和ol列表缩进问题 3 8. 元素水平居中问题 3 9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12....
CSS: 代码如下:body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;} .tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}.seltab{position:absolute;width:15px;height:15px;...
它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX...
兼容各浏览器JS+CSS水平和垂直无缝图片滚动效果代码 12.漂亮暖色调js+flash平滑过渡大屏图片切换的广告代码 13.实用国外JS内容选项卡DEMO下载 14.推荐通用文字图片JS不间断滚动封装类 代替Marquee 15.站长...
2010最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法 #google1 { border:none; width:270px; height:20px; margin:0px 0; font-size:12px; padding-left:0px; overflow:hidden; font-family:Arial; } #google1 ul { ...
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)...