种种兼容技能

2024年1月7日 158次阅读 来源: 国探人生

媒介

本身找了种种兼容题目，我把它们给归结在一起了。愿望人人不要见责！

什么是阅读器兼容：当我们运用差别的阅读器（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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞