所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
各个浏览器的内核（渲染引擎）
①：Trident(IE内核)
IE浏览器： IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）
360安全浏览器： 1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink
360极速浏览器： 7.5之前为Trident+Webkit，7.5为Trident+Blink
猎豹安全浏览器： 1.0-4.2版本为Trident+Webkit，4.3及以后版本为Trident+Blink
傲游浏览器： 傲游1.x、2.x为IE内核，3.x为IE与Webkit双核
世界之窗浏览器：（最初为IE内核，2013年采用Chrome+IE内核
搜狗高速浏览器： 1.x为Trident，2.0及以后版本为Trident+Webkit
UC浏览器： Blink内核+Trident内核
②：Gecko(Firefox内核)
火狐浏览器： Mozilla Firefox
Opera浏览器： Opera浏览器12.17及更早版本曾经采用的内核，现已停止开发并废弃。
③：Webkit(Safari内核,Chrome内核原型,开源)
Chrome浏览器： 采用Webkit
傲游浏览器3.x： 采用Webkit
Safari浏览器： Win/Mac/iPhone/iPad均采用Webkit
Android 默认浏览器： 采用Webkit
③：blink
blink内核是由谷歌开发，chromium/chrome浏览器的内核，实际上也是由webkit衍生而来。
因为webkit本来是个通用内核，适合各种各样的平台，chromium只是其中一个。但webkit也有专门的团队来维护，当然由于是开源项目，google实际也是代码提供者之一。另外苹果的safari浏览器也出自webkit内核，所以苹果在webkit方面相当有话语权，所以webkit算是多方博弈的平台。
随着Google chromium的理念与webkit的分歧越来越大，Google开始在webkit的基础上自立门户，第一步就是删除webkit中所有其他平台的相关代码，这也是blink内核的第一步。
这里只做了解，感兴趣的同学，可以自己去搜搜啊~
兼容问题分类
浏览器兼容性问题可分为以下三类：
一. 渲染相关：和样式相关的问题，即体现在布局效果上的问题。
二. 脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面 以及某些浏览器的功能方面的特性。
三. 其它类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。
一： 渲染相关
1：默认的内外边距不同的问题？
描述：无
解决： *{margin:0;padding:0;}
2：不同浏览器水平居中的问题？
描述：ie6-7文本居中，嵌套的块元素也会居中 ，ff /opera /safari /ie8文本会居中，嵌套块不会居中
解决：块元素设置 margin:0 auto; 或外层嵌套div设置<div align=”center”></div>
浮动块元素的居中：<div style="margin:0px auto;"><div style="float:left;"></div></div>
3：不同浏览器垂直居中的问题？
描述：在浏览器中设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐
解决：给容器设置一个与其高度相同的行高 line-height:与容器的height一样
4：不同浏览器关于高度问题？
描述：如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。 如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框
解决：1.设置overflow:hidden;
2.高度自增height:auto!important;
5：IE6 最小高度(宽度)的问题？
描述： ie6不支持min-height、min-width属性，默认是字体的高度
解决： 定义 overflow 属性来限制 DIV 高度的自动调整<div style="height: 5px; overflow: hidden;"></div>
6：div嵌套p时，出现空白行问题？
描述： ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行
解决： 为p设置margin：0
7：IE6-7图片下面有空隙的问题？
描述： 块元素中含有图片时，ie6-7中会出现图片下有空隙
解决： 1、在源代码中让</div>和<img>在同一行
2、将图片转换为块级对象display:block;
3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom
4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： overflow:hidden;
5、设置图片的浮动属性 float:left;
8：IE6双倍边距的问题？
描述： ie6中设置浮动，同时又设置margin时，会出现双倍边距的问题 例float:left;width:100px;margin:0 100px;
解决： 设置display:inline;
9：IE6两个层之间3px的问题？
描述： 左边层采用浮动，右边没有采用浮动，这时在ie6中两层之间就会产生3像素的间距
解决： 1、右边层也采用浮动 float
2、左边层添加属性 margin-right:-3px;
10：IE6 子元素绝对定位的问题？
描述： 父级元素使用padding后，子元素使用绝对定位，不能精确定位
解决： 在子元素中设置 _left:-20px; _top:-1px;
11：显示手型cursor:hand 问题？
描述： ie6/7/8、opera 都支持 ，但是safari 、 ff 不支持
解决： 写成 cursor:pointer; (所有浏览器都能识别)
12：IE6-7 line-height失效的问题？
描述： 在ie中img与文字放一起时， line-height不起作用
解决： 都设置成float
13：td自动换行的问题 ？
描述： Table宽度固定，td自动换行
解决： 设置Table的table-layout:fixed，td的word-wrap:break-word
14：透明png图片会带背景色问题？
描述： 在ie6下透明的png图片会带一个背景色
解决： background-image: url(icon_home.png);/* 其他浏览器 /
background-repeat: no-repeat;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); / IE6 / _background-image: none; / IE6 */
15：list-style-position默认值的问题？
描述： ie下list-style-position默认为inside, firefox默认为outside
解决： css中指定为outside即可解决兼容性问题
16：list-style-image准确定位的问题？
描述： li前设置图片时，图片与其后的文字对齐问题
解决： 1、采用背景定位 和 字符缩进的方法 background:url() no-repeat left center; text-index:16px;
2、采用相对定位方法 li 设置list-style:url(); li的子元素position:relative;top:-5px;
17：IE中li指定高度后，出现排版错误问题？
描述： 在ie下如果为li指定高度可能会出现排版错位
解决： 设置line-height
18：ul或者li浮动后，margin变大 问题？
描述： ul设置 float后，在ie中margin将变大
解决： 设置ul的display:inline，li的list-style-position:outside；li浮动问题设置li的display:inline
19：IE6-7 列表背景颜色失效的问题？
描述： 做横向导航栏时，ul设置为float且有背景色，li设置为float。ie6-7背景颜色失效
解决： 很多ie的bug都可以通过触发layout来解决 ul添加属性 1、height:1%; 2、float:left; 3、zoom:1;
20：超链接访问过后hover样式不出现的问题 ？
描述： 击超链接后，hover、active样式没有效果
解决： 改变CSS属性的排列顺序: L-V-H-A
21：除去滚动条的问题 ？
描述： 隐藏滚动条
解决： 1、只有ie6-7支持<body scroll="no">
2、除ie6-7不支持 body{overflow:hidden}
3、所有浏览器 html{overflow:hidden}
22：IE6背景闪烁的问题？
描述： 链接、按钮用CSS sprites作为背景，在ie6下会有背景图闪烁的现象。原因是:IE6没有将背景图缓存，每次触发hover的时候都会重新加载
解决： 用JavaScript设置ie6缓存这些图片： document.execCommand("BackgroundImageCache ",false,true);
CssHack使用
CSS Hack大致有3种表现形式
1：CSS类内部Hack
.eg{
height:32px;
background-color:#f1ee18; /*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff; /*IE6、7识别*/
_background-color:#1e0bd1; /*IE6识别*/
}
2：选择器Hack
*html *前缀只对IE6生效*
+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
3：HTML头部引用(if IE)Hack
//只在IE下生效
<!--[if IE]>
//这段文字只在IE浏览器显示
<![endif]-->
//只在IE6下生效
<!--[if IE 6]>
//这段文字只在IE6浏览器显示
<![endif]-->
//只在IE6以上版本生效
<!--[if gte IE 6]>
//这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
//只在IE8上不生效
<!--[if ! IE 8]>
//这段文字在非IE8浏览器显示
<![endif]-->
//非IE浏览器生效
<!--[if !IE]>
//这段文字只在非IE浏览器显示
<![endif]-->
二： 脚本相关
1：HTML对象获取问题？
描述： FireFox：document.getElementById(“idName”);
ie:document.idname或者document.getElementById(“idName”)
解决： 统一使用document.getElementById(“idName”);
2：const问题？
描述： Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决： 统一使用var关键字来定义常量.
3：event.x与event.y问题？
描述： IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决： 使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x和Firefox下的event.pageX.
4：window.location.href问题？
描述： IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location
解决： 使用window.location来代替window.location.href.
5：firefox与IE的父元素(parentElement)的区别？
描述： IE：obj.parentElement
firefox：obj.parentNode
解决： 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择
6：集合类对象问题？
描述： IE下，可以使用 () 或 [] 获取集合类对象；
Firefox下，只能使用 [ ]获取集合类对象。
解决： 统一使用 [] 获取集合类对象
7：自定义属性问题？
描述： IE下，可以用常规方法来获取自定义属性，也可以使用getAttribute() 获取自定义属性；
Firefox下，只能使用getAttribute() 获取自定义属性。
解决： 统一通过getAttribute() 获取自定义属性
8： input.type属性问题？
描述： IE下input.type属性为只读；但是Firefox下input.type属性为读写。
解决： 不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素
9：event.srcElement问题？
描述： IE下，even对象有srcElement属性，但是没有target属性；
Firefox下，even对象有target属性，但是没有srcElement属性
解决： 使用srcObj = event.srcElement ?event.srcElement : event.target;
10：Table操作问题？
描述： ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用
解决：
/**由于俺很少使用JS直接操作表格，这个问题没有遇见过。建议使用JS框架集来操作table，如JQuery。**/
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");cell.innerHTML = "";
cell.className = "XXXX";
row.appendChild(cell);
11：innerText在IE中能正常工作，但在FireFox中却不行？
描述： 无
解决：
//需用textContent
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
三： 其它类别
暂无
网友评论