一、兼容产生原因
很多的兼容性都是IE的低版本产生的
二、浏览器内核
浏览器 | 内核 |
---|---|
IE | Trident |
Chrome | Webkit/Blink |
Firefox | Gecko |
Safari | Webkit |
国产浏览器 | Trident + Webkit 或 Trident + Gecko |
三、常见兼容问题及解决方案
1.引入reset文件
2.使用css Hack
由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack。
CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
1.属性前缀法(即类内部Hack)
例如 IE6能识别下划线"“和星号” * “,IE7能识别星号” * “,但不能识别下划线”",IE6~IE10都认识"\9",但firefox前述三个都不能认识。
2.选择器前缀法(即选择器Hack)
例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。
3.IE条件注释法(即HTML条件注释Hack)
针对所有IE(注:IE10+已经不再支持条件注释):
<!--[if IE]>IE浏览器显示的内容 <![endif]-->
针对IE6及以下版本:
<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
3.display:inline-block
在display:inline-block元素后面加上以下代码
*display: inline;
*zoom: 1;
4.在IE7 以下时如果使用定位,那么记得把left和top都加上
如果改子元素的z-index解决不了问题,应该改和下面元素平级的祖先元素的z-index
5.在IE8及以下,input的光标会跑到左上角,不再居中
给input一个line-height
四、模拟小米的低版本提示
<!--[if lt IE 9]>
<style>
.box{
width: 500px;
height: 500px;
background-color: #ccc;
position: fixed;
top: 50%;
left: 50%;
margin-top:-250px;
margin-left:-250px;
}
.masking{
position: fixed;
top: 0;
left: 0;
right:0;
bottom:0;
background:#000;
filter:alpha(opacity=10)
}
</style>
<div class="box">
您的浏览器版本过低,去换一个吧!
</div>
<div class="masking"></div>
<![endif]-->
五、360浏览器的兼容
浏览器默认内核的指定只需在head标签中添加一行代码即可:
若页面需默认用极速核,增加标签:
<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核,增加标签:
<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核,增加标签:
<meta name="renderer" content="ie-stand">
content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。
六、其他兼容手段
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
chrome=1 会查找用户是否安装了GCF插件,
如果安装了其内核的渲染方式变成chrome内核渲染
如果没有安装,则是用当前IE浏览器支持的最高版本进行打开
详情见:https://www.cnblogs.com/micro-chen/p/5195065.html