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="#" style="color: #FFFFFF;font-weight: bold;" onclick="this.parentNode.parentNode.removeChild(this.parentNode.style.display='none');"> 
點擊關閉提示 </a>
</div>

(```)