夏日博客

A-A+

浏览器兼容常见问题介绍(ff,ie,Chrome)总结

2016年01月27日 前端设计 暂无评论 阅读 7 views 次

现在浏览器越来越多了，兼容性也特别复杂，下面我收藏了css与javascript中浏览器兼容常见问题总结，有需要的朋友可参考一下。

突然间，在Chrome下看起来很整齐的布局，在IE下变成一团糟。为了找出原因，我改动了div的background-color属性。最后，发现同一个DIV的宽度在IE和Chrome下却不一样。这大晚上的，真是怪吓人滴！
之后，做了个测试.

Css代码如下:

div1
{
width:960px;
margin:0px;
padding:0px;
}

这时，在两个浏览器下是没有区别滴！总宽度均是960px。

但是,当Css代码如下:

div1
{
width:960px;
margin:0px;
padding:0px 10px 0px 10px;
}

这时，Chrome就不干了。她居然把padding的20px加在了外面，这样div1的总宽度就是960px+10px+10px=980px；而，在IE中div1的宽度仍是960px；
按照我的思维，感觉padding应该算在width里面滴，没想到Chrome这么倔。

经过测试，border和padding一样，margin的值均算在“width”的外面。

还有，在没有设置float的情况下，Chrome会把div1当成position：absolute，而IE会把其当成poisttion：relative；所以，尽量都这是块级元素的float为left！

1. 居中问题

div里的内容，IE默认为居中，而FF默认为左对齐,可以尝试增加代码margin:auto

2. 高度问题

两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间
所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;

但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：

.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3. clear:both;

不想受到float浮动的，就在div中写入clear:both;

4. IE浮动 margin 产生的双倍距离,代码如下:

#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5. padding 问题

FF设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）

高度控制恰当，或尝试使用 height:100%;

宽度减少使用 padding

但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义

6. div嵌套时 y 轴上 padding 和 marign 的问题

FF里 y 轴上 子div 到 父div 的距离为 父padding + 子marign

IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个

FF里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面

7. padding，marign，height，width 的傻瓜式解决技巧

注意是技巧,不是方法,写好标准头:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  

高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div

宽尽量用margin，慎用padding，width算准实际要的减去padding

列表类

1. ul 标签在FF中默认是有 padding 值的，而在IE中只有margin有值

先定义 ul {margin:0;padding:0;}

2. ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}

显示类

1. display:block,inline 两个元素

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table; //for FF,模拟table的效果

display:block 块元素，元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的100%，除非设定一个宽度

div，p，h1，form，ul 和 li 是块元素的例子

display:inline 就是将元素显示为行内元素，元素的特点是：

和其他元素都在一行上；

高，行高及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

span，a，label，input，img，strong 和 em 是 inline 元素的例子

2. 鼠标手指状显示

全部用标准的写法 cursor: pointer;

背景、图片类

1. background 显示问题

全部注意补齐 width，height 属性

2. 背景透明问题

IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

IE: filter: alpha(opacity=10);

FF: opacity:0.6;

FF: -moz-opacity:0.10;

最好两个都写，并将opacity属性放在下面

javascript部份

1. document.form.item 问题

问题:代码中存在 document.formName.item("itemName") 这样的语句，不能在FF下运行

解决方法:改用 document.formName.elements["elementName"]

2. 集合类对象问题

问题：代码中许多集合类对象取用时使用()，IE能接受，FF不能

解决方法：改用 [] 作为下标运算，例：

document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

3. window.event

问题：使用 window.event 无法在FF上运行

解决方法：FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：

  1. onMouseMove = "functionName(event)"  
  2. function functionName (e) {  
  3.     e = e || window.event;  
  4.     ......  
  5. }  

4. HTML对象的 id 作为对象名的问题

问题：在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能

解决方法：使用对象变量时全部用标准的 getElementById("idName")

5. 用 idName 字符串取得对象的问题

问题：在IE中，利用 eval("idName") 可以取得 id 为 idName 的HTML对象，在FF中不能

解决方法：用 getElementById("idName") 代替 eval("idName")

6. 变量名与某HTML对象 id 相同的问题

问题：在FF中，因为对象 id 不作为HTML对象的名称，所以可以使用与HTML对象 id 相同的变量名，IE中不能

解决方法：在声明变量时，一律加上 var ，以避免歧义，这样在IE中亦可正常运行,最好不要取与HTML对象 id 相同的变量名，以减少错误

7. event.x 与 event.y 问题

问题：在IE中，event 对象有x,y属性，FF中没有

解决方法：在FF中，与 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

8. 关于frame

问题：在IE中可以用 window.testFrame 取得该frame，FF中不行

解决方法：

window.top.document.getElementById("testFrame").src = 'xx.htm'

window.top.frameName.location = 'xx.htm'

9. 取得元素的属性

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

10. 在FF中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes

问题：childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点

解决方法：可以通过 node.getElementsByTagName() 来回避这个问题

问题：当html中节点缺失时，IE和FF对 parentNode 的解释不同，例如：

  1. <form>  
  2. <table>  
  3. <input/>  
  4. </table>  
  5. </form>  

FF中 input.parentNode 的值为form，而IE中 input.parentNode 的值为空节点

问题：FF中节点自己没有 removeNode 方法

解决方法：必须使用如下方法 node.parentNode.removeChild(node)

由于chrome,safari,opara 浏览器还未支持自动 “设为首页” & “加入收藏”. 所以我们只能try, catch一下, 给个错误提示! 也算完美了.

另外ie中, 很多人也碰到过 它window.external.addFavorite. 时会报错的问题. 所以俺也只好抛出提示信息了.

加入收藏,Js代码如下:

  1. function addFavorite(){    
  2.     if (document.all){    
  3.         try{    
  4.             window.external.addFavorite(window.location.href,document.title);    
  5.         }catch(e){    
  6.             alert( "加入收藏失败，请使用Ctrl+D进行添加" );    
  7.         }    
  8.    
  9.     }else if (window.sidebar){    
  10.         window.sidebar.addPanel(document.title, window.location.href, "");    
  11.      }else{    
  12.         alert( "加入收藏失败，请使用Ctrl+D进行添加" );    
  13.     }    
  14. }   

设为首页,Js代码如下:

  1. function setHomepage(){  
  2.  if (document.all){  
  3.   document.body.style.behavior='url(#default#homepage)';  
  4.     document.body.setHomePage(window.location.href);  
  5.  }else if (window.sidebar){  
  6.   if(window.netscape){  
  7.    try{  
  8.     netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
  9.    }catch (e){  
  10.     alert( "该操作被浏览器拒绝，如果想启用该功能， 
  11. 请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true" );  
  12.    }  
  13.   }  
  14.   var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components. interfaces.nsIPrefBranch);  
  15.   prefs.setCharPref('browser.startup.homepage',window.location.href);  
  16.  }else{  
  17.   alert('您的浏览器不支持自动自动设置首页,  
  18.  请使用浏览器菜单手动设置!');  
  19.  }  
  20. }  

xml兼容

函数有——

xml_loadFile：xml同步/异步加载。

xml_transformNode：xsl转换。

xml_text：节点的文本。

selectSingleNode：根据XPath选择单个节点。

selectNodes：根据XPath选择多个节点。

全部代码（zyllibjs_xml.js）——

  1. /*  
  2. zyllibjs_xml  
  3. XML处理  
  4. @author zyl910  
  5. 注意——  
  6. 1. Chrome 由于其安全机制限制, 不能读取本地文件。  
  7. Reference  
  8. ~~~~~~~~~  
  9. http://www.jinlie.net/?p=302  
  10. Chrome浏览器加载XML文档  
  11. Update  
  12. ~~~~~~  
  13. [2011-11-02]  
  14. 定义。  
  15. [2011-11-09]  
  16. xml_loadFile: 为回调函数加上isError参数。  
  17. [2011-11-21]  
  18. selectSingleNode  
  19. selectNodes  
  20. */   
  21. // 加载XML文件并返回XML文档节点   
  22. // return: 成功时返回一个对象（同步模式下返回xml文档对象，异步模式下返回操作对象），失败时返回空。   
  23. // xmlUrl: xml文件的url。   
  24. // funcAsync: 回调函数. function onload(xmlDoc, isError){ ... }   
  25. function xml_loadFile(xmlUrl, funcAsync)   
  26. {   
  27. var xmlDoc = null;   
  28. var isChrome = false;   
  29. var asyncIs = (null!=funcAsync); // 是否是异步加载。当funcAsync不为空时，使用异步加载，否则是同步加载。   
  30. // 检查参数   
  31. if (""==xmlUrl) return null;   
  32. if (asyncIs)   
  33. {   
  34. if ("function"!=typeof(funcAsync)) return null;   
  35. }   
  36. // 创建XML对象   
  37. try   
  38. {   
  39. xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // Support IE   
  40. }   
  41. catch(ex)   
  42. {   
  43. }   
  44. if (null==xmlDoc)   
  45. {   
  46. try   
  47. {   
  48. // Support Firefox, Mozilla, Opera, etc   
  49. xmlDoc = document.implementation.createDocument("", "", null); // 创建一个空的 XML 文档对象。   
  50. }   
  51. catch(ex)   
  52. {   
  53. }   
  54. }   
  55. if (null==xmlDoc) return null;   
  56. // 加载XML文档   
  57. xmlDoc.async = asyncIs;   
  58. if (asyncIs)   
  59. {   
  60. if(window.ActiveXObject)   
  61. {   
  62. xmlDoc.onreadystatechange = function(){   
  63. if(xmlDoc.readyState == 4)   
  64. {   
  65. var isError = false;   
  66. if (null!=xmlDoc.parseError)   
  67. {   
  68. isError = (0!=xmlDoc.parseError.errorCode); // 0成功, 非0失败。   
  69. }   
  70. funcAsync(xmlDoc, isError);   
  71. }   
  72. }   
  73. }   
  74. else   
  75. {   
  76. xmlDoc.onload = function(){   
  77. funcAsync(xmlDoc, false);   
  78. }   
  79. }   
  80. }   
  81. try   
  82. {   
  83. xmlDoc.load(xmlUrl);   
  84. }   
  85. catch(ex)   
  86. {   
  87. // alert(ex.message) // 如果浏览器是Chrome，则会catch这个异常：Object # (a Document) has no method "load"   
  88. isChrome = true;   
  89. xmlDoc = null;   
  90. }   
  91. if (isChrome)   
  92. {   
  93. var xhr = new XMLHttpRequest();   
  94. if (asyncIs) // 异步   
  95. {   
  96. xhr.onreadystatechange = function(){   
  97. if(xhr.readyState == 4)   
  98. {   
  99. funcAsync(xhr.responseXML, xhr.status != 200);   
  100. }   
  101. }   
  102. xhr.open("GET", xmlUrl, true);   
  103. try // 异步模式下，由回调函数处理错误。   
  104. {   
  105. xhr.send(null);   
  106. }   
  107. catch(ex)   
  108. {   
  109. funcAsync(null, true);   
  110. return null;   
  111. }   
  112. return xhr; // 注意：返回的是XMLHttpRequest。建议异步模式下仅用null测试返回值。   
  113. }   
  114. else // 同步   
  115. {   
  116. xhr.open("GET", xmlUrl, false);   
  117. xhr.send(null); // 同步模式下，由调用者处理异常   
  118. xmlDoc = xhr.responseXML;   
  119. }   
  120. }   
  121. return xmlDoc;   
  122. }   
  123. // 使用XSLT把XML文档转换为一个字符串。   
  124. function xml_transformNode(xmlDoc, xslDoc)   
  125. {   
  126. if (null==xmlDoc) return "";   
  127. if (null==xslDoc) return "";   
  128. if (window.ActiveXObject) // IE   
  129. {   
  130. return xmlDoc.transformNode(xslDoc);   
  131. }   
  132. else // FireFox, Chrome   
  133. {   
  134. //定义XSLTProcesor对象   
  135. var xsltProcessor=new XSLTProcessor();   
  136. xsltProcessor.importStylesheet(xslDoc);   
  137. // transformToDocument方式   
  138. var result=xsltProcessor.transformToDocument(xmlDoc);   
  139. var xmls=new XMLSerializer();   
  140. var rt = xmls.serializeToString(result);   
  141. return rt;   
  142. }   
  143. }   
  144. // 得到节点的文本   
  145. function xml_text(xmlNode)   
  146. {   
  147. if (null==xmlNode) return "";   
  148. var rt;   
  149. if (window.ActiveXObject) // IE   
  150. {   
  151. rt = xmlNode.text;   
  152. }   
  153. else   
  154. {   
  155. // FireFox, Chrome, ...   
  156. rt = xmlNode.textContent;   
  157. }   
  158. if (null==rt) rt=xmlNode.nodeValue; // XML DOM   
  159. return rt;   
  160. }   
  161. // 添加方法。为了兼容FireFox、Chrome。   
  162. if (!window.ActiveXObject)   
  163. {   
  164. XMLDocument.prototype.selectSingleNode = Element.prototype.selectSingleNode = function (xpath)   
  165. {   
  166. var x = this.selectNodes(xpath)   
  167. if ( ! x || x.length < 1 ) return null ;   
  168. return x[ 0 ];   
  169. }   
  170. XMLDocument.prototype.selectNodes = Element.prototype.selectNodes = function (xpath)   
  171. {   
  172. var xpe = new XPathEvaluator();   
  173. var nsResolver = xpe.createNSResolver( this.ownerDocument == null?this.documentElement : this.ownerDocument.documentElement);   
  174. var result = xpe.evaluate(xpath, this , nsResolver, 0 , null );   
  175. var found = [];   
  176. var res;   
  177. while (res = result.iterateNext())   
  178. found.push(res);   
  179. return found;   
  180. }   
  181. }  
  182. Chrome浏览器加载XML文档   
  183. Chrome浏览器不支持load方法加载XML文档。网上找了下，需要如下解决  
  184.   
  185. function loadXMLDoc(xml_name)   
  186. {   
  187. var xmlDoc;   
  188. try   
  189. {   
  190. xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // Support IE   
  191. ｝   
  192. catch(e)   
  193. {   
  194. try   
  195. {   
  196. // Support Firefox, Mozilla, Opera, etc   
  197. xmlDoc = document.implementation.createDocument("", "", null) ;// 创建一个空的 XML 文档对象。   
  198. }   
  199. catch(e)   
  200. {   
  201. alert(e.message);   
  202. }   
  203. }   
  204. // 加载XML文档   
  205. try   
  206. {   
  207. xmlDoc.async = false; // 关闭异步加载   
  208. xmlDoc.load(xml_name);   
  209. }   
  210. catch(e)   
  211. {   
  212. // alert(e.message) 如果浏览器是Chrome，则会catch这个异常：Object # (a Document) has no method "load"，所以，以下实现支持chrome加载XML文档（只是粗略的写下）   
  213. var xhr = new XMLHttpRequest();   
  214. xhr.open("GET", xml_name, false);   
  215. xhr.send(null);   
  216. xmlDoc = xhr.responseXML.documentElement;   
  217. }   
  218. return xmlDoc;   
  219. }  

BTW，各浏览器加载XML字符串也不同。

IE使用 loadXML() 方法来解析 XML 字符串：

代码如下:xmlDoc.loadXML(xml_str);

FireFox等使用DOMParser 对象解析XML字符串,代码如下:

var parseXml = new DOMParser();

标签：

给我留言