前端常见的浏览器兼容性问题及解决⽅案⼀、常见的浏览器内核：
常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit
IE浏览器： Trident内核，也成为IE内核
Chrome浏览器： Webkit内核，现在是Blink内核
Firefox浏览器： Gecko内核，俗称Firefox内核
Safari浏览器： Webkit内核
Opera浏览器： 最初是⾃⼰的Presto内核，后来加⼊⾕歌⼤军，从Webkit⼜到了Blink内核；
360浏览器： IE+Chrome双内核
猎豹浏览器： IE+Chrome双内核
百度浏览器： IE内核
QQ浏览器： Trident（兼容模式）+Webkit（⾼速模式）
⼆、常见的兼容性问题：
1.    cursor:hand  VS  cursor:pointer
firefox不⽀持hand，但ie⽀持pointer
解决⽅法: 统⼀使⽤pointer
2.  innerText在IE中能正常⼯作，但在FireFox中却不⾏.
需⽤textContent。
解决⽅法:
if(navigator.appName.indexOf("Explorer")  >  -1){
}  else{
}
3.  CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
4.  css中的width和padding
在IE7和FF中width宽度不包括padding，在Ie6中包括padding.
5.  FF和IEBOX模型解释不⼀致导致相差2px
box.style{width:100;border1px;}
ie理解为box.width =100
ff理解为box.width =100 + 1*2 = 102 //加上边框2px
解决⽅法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序⼀定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后⼀个来执⾏，所以不可以只写margin:XXpx!important;
6.  IE5 和IE6的BOX解释不⼀致
IE5下div{width:300px;margin:0 10px 0 10px;}
div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，⽽在IE6和其他浏览器上宽度则是以
300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width
/**/:340px;margin:0 10px 0 10px}
7.  ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空⽩以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空⽩，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，⽽在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
8. 元素⽔平居中问题
FF: margin:0auto;
IE: ⽗级{ text-align:center; }
9. Div的垂直居中问题
vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼：line-height:200px；然后插⼊⽂字，就垂直居中了。缺点是要控制内容不要换⾏。
10.      margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是⼀个ie6都存在的bug。解决⽅案是在这个div⾥⾯加上display:inline;
例如：
<divid=”imfloat”>
相应的css为
#imfloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}
11.      IE与宽度和⾼度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就⼤了，如果只⽤宽度和⾼度，正常的浏览器⾥这两个值就不会变，如果只⽤min-width和min-height的话，IE
下⾯根本等于没有设置宽度和⾼度。
⽐如要设置背景图⽚，这个宽度是⽐较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto;height: auto; min-width: 80px; min-height: 35px;}
12. 页⾯的最⼩宽度
如上⼀个问题，IE不识别min，要实现最⼩宽度，可⽤下⾯的⽅法：
#container{ min-width: 600px;width:expression(document.body.clientWidth＜ 600? "600px": "auto" );}
第⼀个min-width是正常的；但第2⾏的width使⽤了Javascript，这只有IE才认得，这也会让你的HTML⽂档不太正规。它实际上通过Javascript的判断来实现最⼩宽度。
13.      DIV浮动IE⽂本产⽣3象素的bug
左边对象浮动，右边采⽤外补丁的左边距来定位，右边对象内的⽂本会离左边有3px的间距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>
14.      IE捉迷藏的问题
当div应⽤复杂的时候每个栏中⼜有⼀些链接，DIV等这个时候容易发⽣捉迷藏的问题。
有些内容显⽰不出来，当⿏标选择这个区域是发现内容确实在页⾯。
解决办法：对#layout使⽤line-height属性或者给#layout使⽤固定⾼和宽。页⾯结构尽量简单。
15.      float的div闭合；清除浮动;⾃适应⾼度
① 例如：＜div id=”floatA”>＜div id=”floatB”>＜div id=”NOTfloatC”>
这⾥的NOTfloatC并不希望继续平移，⽽是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)
这段代码在IE中毫⽆问题，问题出在FF。原因是NOTfloatC并⾮float标签，必须将float标签闭合。在＜divclass=”floatB”>＜div class=”NOTfloatC”>之间加上＜div class=”clear”>这个div⼀定要注意位置，⽽且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产⽣异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}
②作为外部 wrapper 的 div 不要定死⾼度，为了让⾼度能⾃适应，要在wrapper⾥⾯加上overflow:hidden; 当包含float的box的时候，⾼度⾃适应在IE下⽆效，这时候应该触发IE的layout私有属性(万恶的IE啊！)⽤zoom:1；可以做到，这样就达到了兼容。
例如某⼀个wrapper如下定义：
.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}
③对于排版，我们⽤得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后⾯做⼀个统⼀的背景，譬如:
<div id=”page”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
⽐如我们要将page的背景设置成蓝⾊，以达到所有三栏的背景颜⾊是蓝⾊的⽬的，但是我们会发现随着left centerright的向下拉长,⽽page居然保存⾼度不变，问题来了，原因在于page不是float属性,⽽我们的page由于要居中，不能设置成float，所以我们应该这样解决：
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
</div>
再嵌⼊⼀个float left⽽宽度是100%的DIV解决之。
④万能float 闭合(⾮常重要!)
关于 clear float 的原理可参见 [How To ClearFloats Without Structural Markup]，将以下代码加⼊Global CSS 中，给需要闭合的div加上class="clearfix"即可，屡试不爽。
/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者这样设置：.hackbox{display:table; //将对象作为块元素级的表格显⽰}
16. ⾼度不适应
⾼度不适应是当内层对象的⾼度发⽣变化时外层⾼度不能⾃动进⾏调节，特别是当内层对象使⽤margin 或padding时。
例：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p对象中的内容＜/p>
</div>
解决技巧：在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。
17.      IE6下图⽚下有空隙产⽣
解决这个BUG的技巧有很多，可以是改变html的排版，或者设置img为display:block或者设置vertical-align属性为vertical-
align:top/bottom/middle/text-bottom都可以解决.
18. 对齐⽂本与⽂本输⼊框
加上vertical-align:middle;
<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
</style>
经验证，在IE下任⼀版本都不适⽤，⽽ff、opera、safari、chrome均OK！
19.      LI中内容超过长度后以省略号显⽰
此技巧适⽤与IE、Opera、safari、chrom浏览器，FF暂不⽀持。
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>
20. 为什么web标准中IE⽆法设置滚动条颜⾊了
解决办法是将body换成html
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
＜/style>
21. 为什么⽆法定义1px左右⾼度的容器
IE6下这个问题是因为默认的⾏⾼造成的，解决的技巧也有很多：
例如:overflow:hidden  zoom:0.08  line-height:1px
16.怎么样才能让层显⽰在FLASH之上呢
解决的办法是给FLASH设置透明
<paramname=“wmode” value=“transparent” />
22. 链接(a标签)的边框与背景div border属性
a链接加边框和背景⾊，需设置 display: block, 同时设置 float: left 保证不换⾏。参照menubar, 给 a 和menubar设置⾼度是为了避免底边显⽰错位, 若不设 height, 可以在menubar中插⼊⼀个空格。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。