资讯专栏INFORMATION COLUMN

各种兼容技巧

Ilikewhite / 1236人阅读

摘要:前言自己找了各种兼容问题,我把它们给归纳在一起了。而兼容就是一种办法,能让你在一个里面独立的写支持不同浏览器的样式。解决方法统一用来取得为的对象。八问题问题说明只能在下运行,而不能在下运行,这是因为的只能在事件发生的现场使用。

前言

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

什么是浏览器兼容:当我们使用不同的浏览器(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.居中问题

垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vetical-align: middle.( 注意内容不 要换行.)

水平居中. 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)
示例:

  
                 
阅读需要支付1元查看
<