摘要:前言自己找了各种兼容问题,我把它们给归纳在一起了。而兼容就是一种办法,能让你在一个里面独立的写支持不同浏览器的样式。解决方法统一用来取得为的对象。八问题问题说明只能在下运行,而不能在下运行,这是因为的只能在事件发生的现场使用。
前言
自己找了各种兼容问题,我把它们给归纳在一起了。希望大家不要见怪!
什么是浏览器兼容:当我们使用不同的浏览器(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)
示例: