各种兼容技巧

2024年5月26日 189次阅读 来源: 国探人生

前言

自己找了各种兼容问题，我把它们给归纳在一起了。希望大家不要见怪！

什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵！

css兼容技巧

1. 问题一

为什么FF 下文本无法撑开容器的高度？

标准浏览器中固定高度值的容器是不会象IE6 里那样被撑开的, 那我又想固定高度，又想能被撑开需要怎样设置呢？

解决方法： 去掉height 设置min-height:200px; 这里为了照顾不认识min-height 的IE6 可以这样定义：

div { 
   height:auto!important; 
   height:200px; 
   min-height:200px; 
 }
 兼容代码:兼容最推荐的模式。
/* FF */
.submitbutton {
   float:left;
   width: 40px;
   height: 57px;
   margin-top: 24px;
   margin-right: 12px;
 }
/* IE6 */
*html .submitbutton {
   margin-top: 21px;
 }
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}

2.各种样式表的属性的兼容

解决方法：IE用-ms-，Firefox用-moz-，Opera用-o-，Safari、多款手机浏览器用-webkit-

比如：CSS里设定阴影的属性

/* 原型是 */
box-shadow: 1px 1px 3px #999;
/* 要补上兼容代码*/
-moz-box-shadow: 1px 1px 3px #999; /* Firefox */
-webkit-box-shadow: 1px 1px 3px #999; /* Safari*/
-o-box-shadow: 1px 1px 3px #999; /* Opera */
-ms-box-shadow: 1px 1px 3px #999; /* IE */

3.居中问题

  1. 垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不 要换行.)
  2. 水平居中. margin: 0 auto;(当然不是万能)

提醒：作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应

js兼容技巧

一、document.formName.item(”itemName”) 问题

问题说明：

IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements[“elementName”]；
Firefox 下，只能使用document.formName.elements[“elementName”]。

解决方法：统一使用document.formName.elements[“elementName”]。

二、集合类对象问题

问题说明：

IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。

解决方法：统一使用 [] 获取集合类对象。

三、自定义属性问题

问题说明：
IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；
Firefox下，只能使用 getAttribute() 获取自定义属性。

解决方法：统一通过 getAttribute() 获取自定义属性。

四、eval(”idName”)问题

问题说明：
IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName 的HTML对象；
Firefox下，只能使用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。

解决方法：统一用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。

五、变量名与某HTML对象ID相同的问题

问题说明：

IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，
Firefox下则不能；Firefox下，可以使 用与HTML对象ID相同的变量名，IE下则不能。

解决方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML对象ID相 同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。

六、const问题

问题说明：

Firefox下，可以使用const关键字或var关键字来定义常量；
IE下，只能使用var关键字来定义常量。

解决方法：统一使用var关键字来定义常量。

七、input.type属性问题

问题说明：

IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。

解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一 个新的input元素。

八、window.event问题

问题说明：

window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。

解决方法：

在事件发生的函数上加上event参数，在函数体内(假设形参为evt)
使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：

 <input type="button" onclick="doSomething(event)"/> 
 <script language="javascript"> 
function doSomething(evt) { 
   var myEvent = evt?evt:(window.event?window.event:null) 
   ... 
}

九、event.x与event.y问题

问题说明：

IE下，even对象有x、y属性，但是没有pageX、pageY属性；
Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。

解决方法：

var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;

如果考虑第8条问题，就改用myEvent代替event即可。

以上是一部分，后续还会有。

    原文作者：国探人生
    原文地址: https://segmentfault.com/a/1190000013277845
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞