最近在找工作的途中遇到浏览器兼容问题,因此特意打算总结一下。首先由于浏览器种类众多,不同的浏览器其内核亦不尽相同,故各个浏览器对网页的解析有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容。目前大多数主流的框架仅支持IE9+,这就对于那些要求低端的浏览器兼容的前端工程师头疼,没有IE就没有伤害啊。
Trident内核:IE、Maxthon、TT;
Gecko内核:Netcape6+、FireFox;
Presto内核:Opera7+;
Webkit内核:Safari、Chrome。
其实兼容的问题主要是IE与我们常用浏览器的兼容,例如FireFox、Chrome,而对于IE来说,IE9及以上的兼容问题不大,主要是IE6到IE8这3个版本的兼容问题。
1.默认边距不同
使用CSS *{margin:0;padding:0;},这是最简单常用的方法。
2.当设置的高度标签比较小时(一般小于10px),IE6和IE7的高度会超出自己设置高度
给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度
3.块属性标签浮动后,在IE6显示margin比设置的大
在float的标签样式控制中加入 display:inline;将其转化为行内属性
4.图片元素img下默认有间距
图片使用float属性来解决
5.opacity多浏览器透明度兼容问题
以透明度一半为例
{
filter: alpha(opacity=50);/IE/
-moz-opacity: 0.5;/老版Mozilla/
-khtml-opacity: 0.5;/老版Safari/
opacity: 0.5;
}
6. IE6的3px Bug
IE6里的一个标签浮动,另一个不浮动的元素自然上浮与之靠近出现3px间距,对浮动的标签设置_margin-right: -3px;来解决此问题。
关于IE和常用的测试浏览器火狐之间的兼容性
1.表单
IE:可以使用document.formName.item(“itemName”)或document.formName.elements[“elementName”]
Firefox:只能使用document.formName.elements[“elementName”]
解决方法:统一使用document.formName.elements[“elementName”]
2.集合类对象
IE:可以使用()或[]获取集合类对象;
Firefox:只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.
3.自定义属性
IE:可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性
Firefox:只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
4.元素获取
IE:可以使用eval(“idName”)或getElementById(“idName”)来取得id为idName的HTML对象;
Firefox:只能使用getElementById(“idName”)来取得id为idName的HTML对象。
解决方法:统一用getElementById(“idName”)来取得id为idName的HTML对象。
5.命名重复
变量名与某HTML对象ID相同的问题
IE:HTML对象的ID可以作为document的下属对象变量名直接使用,Firefox下则不能;
Firefox:可以使用与HTML对象ID相同的变量名,IE下则不能。
解决方法:使用document.getElementById(“idName”)代替document.idName。最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免产生歧义。
6.const
IE:只能使用var关键字来定义变量。
Firefox:可以使用const关键字或var关键字来定义变量。
解决方法:统一使用var关键字来定义变量。
此外还有许多兼容性问题,待到遇见后进行总结。
几个常见的浏览器兼容问题
最新推荐文章于 2024-06-30 15:31:34 发布