浏览器兼容问题及解决方法

最新推荐文章于 2024-05-20 21:55:32 发布

伪成年_young

最新推荐文章于 2024-05-20 21:55:32 发布

阅读量2k

点赞数 1

分类专栏：日常积累文章标签：浏览器兼容

本文链接：https://blog.csdn.net/u012552674/article/details/99955809

版权

日常积累专栏收录该内容

11 篇文章 0 订阅

订阅专栏

出现浏览器兼容问题，主要是由于浏览器内核不相同。

对于浏览器兼容问题，总结为HTML、JavaScript兼容，CSS兼容。

HTML相关问题易处理，无非高版本浏览器用了低版本浏览器无法识别元素，导致无法解析。

特别是html5增加了许多标签。

HTML兼容问题解决方法：

html的hack（条件注释法）：

<!--[if lte IE 6]>这段文字仅显示在IE6及IE6以下版本<![endif]-->

<!--[if gte IE 6]>这段文字仅显示在IE6及IE6以上版本<![endif]-->

<!--[if gt IE 6]> 这段文字仅显示在 IE6 以上版本（不包含IE6）<![endif]-->  

<!--[if IE 5.5]> 这段文字仅显示在 IE5.5<![endif]-->  
  
<!--在 IE6 及 IE6 以下版本中加载css-->    

<!--[if lte IE 6]> 
    <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" />
<![endif]-->    

缺点是在IE 浏览器下可能会增加额外的HTTP请求数。

CSS兼容问题解决方法：

css的hack：

background:red;		//高级浏览器识别
_background:red;	//仅IE6识别
!background:red;	//仅IE6/7识别
background:red\0/;	//仅IE8识别
background:red\0;	//IE8/9/10识别
background:red\9;	//IE6/7/8/9/10识别

常见的兼容性问题bug：

1、IE6 怪异解析之padding与 border算入宽高
原因：未加文档声明造成非盒模型解析
解决方法：加入文档声明<!doctype html>

2、IE6 在块元素、左右浮动、设定margin时造成margin双倍（双边距）
解决方法：display:inline

3、以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签 11，垂直居中，20-11=9，9 要分给文字的上面与下面，怎么分？IE6 就会与其它的不同，所以，尽量避免。
1）字体大小为奇数之边框高度少1px
解决方法：字体大小设置为偶数或line-height为偶数
2）line-height，文本垂直居中差1px
解决方法：padding-top 代替line-height居中，或line-height加 1 或减1
3）与父标签的宽度的奇偶不同的居中造成1px的偏离
解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度

4、内部盒模型超出父级时，父级被撑大
解决方法：父标签使用overflow:hidden

5、line-height默认行高bug
解决方法：line-height设值

6、行标签之间会有一小段空白
解决方法：float或结构并排(可读性差，不建议)

7、标签高度无法小于19px
解决方法：overflow: hidden;

8、左浮元素margin-bottom 失效
解决方法：显示设置高度 or 父标签设置_padding-bottom 代替子标签的margin-bottom or 再放个标签让父标签浮动，子标签 margin- bottom，即(margin-bottom 与 float不同时作用于一个标签)

9、img 于块元素中，底边多出空白
解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

10、li之间会有间距
解决方法：float: left;

11、块元素中有文字及右浮动的行元素，行元素换行
解决方法：将行元素置于块元素内的文字前

12、position下的left，bottom 错位
解决方法：为父级(relative 层)设置宽高或添加*zoom:1

13、子级中有设置position，则父级overflow失效
解决方法：为父级设置position:relative

14、 IE6 下图片下方有空隙产生；
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为 display:block，或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom 都可以解决. （但是近我发现这个问题在其它浏览器中也有所体现）

15、IE6 3px bug 两个浮动层中间有间隙，这个IE 的 3PX BUG也是经常出现的,
解决的办法是给右边元素也同样浮动 float:left 或者相对IE6 定义.left margin-right:-3px; 经典两列布局，float: left;width:200px; 第二个，margin-left,200px; 他们之间会产生3px 的间距。

16、在 IE6 中没有min-width的概念，其默认width就是min-width，所以有时字体过多它会选择撑开容器。

17、 IE6 无法定义1px左右高度的容器，是因为默认的行高造成的,解决的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px ⑦ 使用margin ： 0 auto；方法使容器居中依然在IE6 中行不通，我们要对其父容器使用

18、被点击访问过的超链接样式不在具有hover和 active了,很多人应该都遇到过这个问题, 解决方法是改变CSS属性的排列顺序: L-V-H-A

19、在使用绝对定位/相对定位时，设置z-index 在 ie 中可能会失效，是因为其元素依赖于其父元素的z-index，而父元素默认为0 ？所以子元素z-index 高，而父元素底，依然不会改变其显示顺序；

JS兼容性问题

1、关于获取行外样式currentStyle和getComputedStyle出现的兼容性问题：
js通过style不可获取行外样,式，当需要获取行外样式时，通过以下两个方法获取行外样式：

IE下：currentStyle
Chrome，FF下：getComputedStyle(oDiv,false)
兼容两个浏览器的写法：
if(oDiv.currentStyle){
	alert(oDiv.currentStyle.width);
}else{
	alert(getComputedStyle(oDiv,false).width);
}
*注：在解决很多兼容性写法时，都是用if...else...

封装一个获取行外样式的函数：(兼容所有浏览器，包括低版本IE6,7)
function getStyle(obj,name){
	if(obj.currentStyle){
		//IE
		return obj.currentStyle[name];
	}else{
		//Chrom,FF
		return getComputedStyle(obj,false)[name];
	}
}
调用：getStyle（oDiv,'width'）;

2、用“索引”获取字符串每一项出现的兼容性问题：

对于字符串也有类似于数组这样的通过下标索引获取每一项的值，
var str=“abcde”;
alert（str[1]）;
但是低版本的浏览器IE6,7不兼容
兼容方法：str.charAt(i)	//全部浏览器都兼容
var str="abcde";
for(var i=0;i<str.length;i++){
	alert(str.charAt(i)};	//放回字符串中的每一项
}

3、关于DOM中childNodes获取子节点出现的兼容性问题
childNodes：获取子节点，
——IE6-8：获取的是元素节点，正常
——高版本浏览器：但是会包含文本节点和元素节点（不正常）
解决方法：使用nodeType:节点的类型，并作出判断。
——nodeType=3 文本节点
——nodeType=1 元素节点

 例: 获取ul里所有的子节点，让所有的子节点背景色变成红色   获取元素子节点兼容的方法:  
 var oUl=document.getElementById('ul');   
 for(var i=0;i<oUl.childNodes.length;i++){
 	if(oUl.childNodes[i].nodeType==1){
 		oUl.childNodes[i].style.background='red';     
 	}   
 }
 *注：上面的childNodes为我们带来的坤然完全可以有children属性来代替。
 children属性：只获取元素节点，不获取文本节点，兼容所有的浏览器，所以一般获取子节点时，最好用children属性。
var oUl=document.getElementById('ul');       oUl.children.style.background="red";

4、使用firstChild，lastChild等，获取第一个/最后一个元素节点时产生的问题
——IE6-8下，firstChild，lastChild，nextSibling，previousSiling，获取第一个元素节点
(高版本浏览器IE9+,FF,Chrome 不兼容,其获取的空白文本节点)
——高版本浏览器下：firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
(低版本浏览器IE6-8 不兼容)
——兼容写法：找到ul的第一个元素节点，并将背景色变成红色

var oUl=document.getElementById('ul');     
if(oUl.firstElementChild){       
	//高版本浏览器
	oUl.firstElementChild.style.background='red';     }else{       
	//IE6-8
	oUl.firstChild.style.background='red';    
 }

5、使用event对象，出现的兼容性问题
如：获取鼠标位置
IE/Chrom：event.clientX;event.clientY
FF/IE9以上/Chrom:传参ev–>ev.clientX;ev.clientY
获取event对象兼容性写法：var oEvent==ev||event；

document.oncilck=function(ev){
	var oEvent==ev||event;
	if(oEvent){
		alert(oEvent.clientX);
	}
}

6、为一个元素绑定两个相同事件：attachEvent/attachEventLister出现的兼容问题
事件绑定：（不兼容需要两个结合做兼容if…else…）
IE8以下用：attachEvent(‘事件名’，fn)；
FF，Chrome，IE9-10用：attachEventLister（‘事件名’，fn，false）；
多事件绑定封装成一个兼容函数：

function myAddEvent(obj,ev,fn){
	if(obj.attachEvent){
		//IE8 以下         
		obj.attachEvent('on'+ev,fn);       
	}else{
		//FF,Chrome,IE9-10
		obj.attachEventLister(ev,fn,false); 
	}     
}     
myAddEvent(oBtn,'click',function(){ alert(a); });     myAddEvent(oBtn,'click',function(){ alert(b); });

7、于获取滚动条距离而出现的问题
当我们获取滚动条滚动距离时：
IE，Chrome：document.body.scrollTop
FF:document.documentElement.scrollTop
兼容处理：var

scrollTop=document.documentElement.scrollTop||document.body.scrollTop

伪成年_young

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
浏览器兼容问题及解决方法

出现浏览器兼容问题，主要是由于浏览器内核不相同。对于浏览器兼容问题，总结为HTML、JavaScript兼容，CSS兼容。HTML相关问题易处理，无非高版本浏览器用了低版本浏览器无法识别元素，导致无法解析。特别是html5增加了许多标签。HTML兼容问题解决方法：html的hack（条件注释法）：<!--[if lte IE 6]>这段文字仅显示在IE6及IE6以下版本&l...
复制链接

扫一扫