ie兼容问题记录

工作中遇到的ie网站兼容性问题头疼..........

以下为从网上搜索学习的整理兼容性方法用于自己记录

#兼容问题

##css hack https://blog.csdn.net/freshlover/article/details/12132801
##综合兼容方案：https://www.cnblogs.com/zamhown/p/6709932.html
##标签兼容：https://blog.csdn.net/qq_34543438/article/details/74517880
##文字溢出隐藏：http://www.jiangweishan.com/article/text-yichu-method.html

##meta标签兼容
(```)

<meta http-equiv = "Content-Type" content="text/html";charset="utf-8"></metahttp-equiv>
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE8>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE8></metahttp-equiv>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7></metahttp-equiv>

(```)

##判断ie版本进入(条件注释方法)
(```)

<!--[if lte IE 9]>
<script src="./lib/html5shiv/html5shiv.js"></script>
<script src="./lib/selectivizr.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script src="./lib/html5shiv/html5shiv.js"></script>
<script src="./lib/selectivizr.js"></script>
<style>
.index-text{
top:30%;
left:14%;
}
</style>
<![endif]-->

(```)

##百度兼容处理方法(网上搜的)
(```)
<script>varwpo={start:newDate*1,pid:109,page:'superpage'}</script>
(```)

##伪元素兼容方法
(```)

div:first-child 第一个div
div:first-child+div 第二个div

(```)

##媒体查询检测ie10 11 (ie10 11不支持条件注释方法)
(```)

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
} /*媒体查询检测ie10 11*/

(```)

##兼容圆角方法(未成功)
(```)
兼容圆角

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
behavior: url(../lib/PIE.htc);
使用pie.htc需要注意以下几点：
1．添加pie.htc时路径是相对于当前html的而不是相对于css的，从图1示例代码可以看出。在此我们可以使用根路径（/css/pie.htc），这样不用考虑html、css和pie.htc的相对位置。
2. 项目需要在服务器或者本地服务器上运行才有效果 。
3.给div添加阴影时必须给div加上背景，否则div内部也全是阴影。

(```)

##meta标签处理双核浏览器兼容
(```)

通过meta标签做内核兼容 通过这两个标签可使国内浏览器默认使用极速模式浏览
<meta name="renderer" content="webkit|ie-stand|ie-comp" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。

若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit"> 
若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp"> 
若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">

同时也可以同时指定多个内核名称，之间以符号”|”进行分隔，如下代码： 
<meta name="renderer" content="webkit|ie-comp|ie-stand">
360浏览器官方说明：http://se.360.cn/v6/help/meta.html 
QQ浏览器官方说明：http://browser.qq.com/wiki/index.html#!index.md

(```)

##视频兼容
html5media：https://html5media.info/

##jq下 ajax ie8 9下不起作用
https://blog.csdn.net/dulei_start/article/details/81220170

##有好的提示用户浏览器版本过低请升级
(```)

<div style="background: #eeeeee;border-bottom: 1px solid #cccccc;color: #000;padding: 15px;margin: 0;z-index: 9999;">
您的浏览器<strong> 版本过低 不能体验更好的浏览效果</strong>，
<a href="http://browsehappy.com/" style="color: #003bb3;font-weight: bold;" target="_blank"> 请升级您的浏览器 </a>
以获得更好的体验。
<a href="javascript:;" style="color: #003bb3;font-weight: bold;" onclick="this.parentNode.parentNode.removeChild(this.parentNode.style.display='none');"> 点击关闭提示 </a>
</div>

(```)

猜你喜欢