the compatibility problem of ie

時間 2020-11-30

標籤 javascript css html html5 java jquery css3 web 瀏覽器欄目 JavaScript 简体版

原文原文鏈接

ie8hack

ie8下的兼容問題處理：背景透明，css3圓角，css3和jquery支持部分css3選擇器（例如：nth-child）,支持html5的語義化標籤，媒體查詢@media等。javascript

在html頁面頭部<head>優先加載ie8須要的插件，由於部分插件須要依賴jquery,因此jquery須要最早加載。而後用IE的條件註釋添加須要的腳本css

樣式css的添加：

若是是其餘的樣式.css就添加在<head>裏面的全局global.css後面html

<head>html5

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>車險保費計算</title>
<script src="../../../public/js/jquery-1.11.2.min.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="../../../public/js/html5.js"></script>
<script type="text/javascript" src="../../../public/js/respond.min.js"></script>
<script type="text/javascript" src="../../../public/js/selectivizr-min.js"></script>
<![endif]-->

<!--[if IE 6]>
<script type="text/javascript" src="../../../public/js/DD_belatedPNG_0.0.8a.min.js"></script>
<script>
    DD_belatedPNG.fix('*');
</script>
<![endif]-->

<!--全局css-->
<link rel="stylesheet" type="text/css" href="../../../public/css/global.css"/>
</head>

腳本js的添加

若是是其餘的插件和邏輯js就添加在 </body>的上方。注意順序，插件js優先添加。java

<script src="../../../public/js/jquery.easydropdown.js"></script>
<!--全局js-->
<script src="../../../public/js/global.js"></script>
<!--邏輯js-->
<script src="../js/calcPrice.js"></script>
</body>
</html>

css細節注意點

只要如上添加插件js就能夠在ie8下使用css3和jquery css3選擇器nth-child,html5語義化標籤，如：section articel，媒體查詢@media等。jquery

圓角border-radiuscss3

兼容ie8css3圓角和陰影的PIE.htc文件的使用方法：

直接將pie.htc文件放在項目結構裏，如圖1的紅色塊1web
如圖1的紅色塊2 calcPrice.html添加的樣式如圖1的紅色塊3calcPrice.css裏面的樣式用到圓角或陰影，需在後面添加behavior: url(../../../public/css/PIE.htc);瀏覽器
關鍵來了，behavior後面的url路徑不是css相對pie，這個和咱們平時的background-image使用不同。這個路徑是html相對的pie路徑。你也能夠理解成calcPrice.html這個頁面添加圖1紅色塊1上面的global.css 的路徑就是behavior: url(../../../public/css/PIE.htc)的正確路徑了，由於pie文件和global.css 文件在同一個目錄下。ui

樣式規範注意

盒子陰影：

box-shadow: 1px 1px 1px #dedede;
    -moz-box-shadow: 1px 1px 1px #dedede;
    -webkit-box-shadow: 1px 1px 1px #dedede;
    behavior: url(../../../public/css/PIE.htc);

圓角

border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    behavior: url(../../../public/css/PIE.htc);

ie8背景圖片沒生效？

例子： background: url(../images/carInfo.png)no-repeat 0 0;
以上這樣的路徑是正確的，在chrom下徹底沒問題，爲何到了ie8，背景圖就顯示不了？

解決辦法很簡單
 background: url(../images/carInfo.png)  no-repeat 0 0;
在url()後面加上兩個空格就能夠了。

嬌氣的ie8，按照上面使用的pie.htc的圓角和盒子陰影，發現元素隱藏不見了！！！！
解決辦法：在須要用圓角和陰影的元素樣式上加上position:relative; 就能夠了。

ie8背景透明opacity

在ie8下背景透明而透明層上沒文字或圖片內容的時候，能夠在opacity=0;下一行直接添加 filter:Alpha(opacity=0);

可是透明的背景上有內容的時候，在ie8只上面加了filter:Alpha，是否是以爲就像你大冬天在浴室裏帶着眼鏡洗熱水澡看到的情景。。。。。眼前一片朦朧哇~~~

假設咱們須要設置下面的div背景透明而文字不透明
  <div class=" coverModal">        <!--用於定位 -->
    <div class="coverBg ">        <!--背景透明的塊 -->
      <div class="coverCon">我是文字，我不想被透明啊~</div>   <!--主體內容 -->
      </div> 
  </div>

/*遮蓋層公共樣式*/
    .coverModal{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        margin-left: -6%;
        z-index: 9999;
   }
.coverBg {
    height:100%;
    background-color: rgba(0,0,0,0.5);
    /* IE九、標準瀏覽器、IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂 */
}

.coverBg .coverCon{
    color: #FFFFFF;
}
@media \0screen\,screen\9 {
    /* 只支持IE六、七、8 */
    .coverBg {
        background-color:#000000;
        filter:Alpha(opacity=20);
        position:static; 
        /* IE六、七、8只能設置position:static(默認屬性) ，不然會致使子元素繼承Alpha值 */
        *zoom:1; 
        /* 激活IE六、7的haslayout屬性，讓它讀懂Alpha */
    }
    .coverBg .coverCon{
        position: relative;
        /* 設置子元素爲相對定位，可以讓子元素不繼承Alpha值 */
    }
}

ie其餘hack

background-color:red;
background-color:red\0;  /* ie 8/9*/
background-color:blue\9\0;  /* ie 9*/

/*ie11 css hack*/ 
@media all and (-ms-high-contrast:none) { 
*::-ms-backdrop, .class名字 { 裏面的樣式:樣式值;} 
} 

/*ie10 css hack*/ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
.class名字 { 裏面的樣式:樣式值;} 
}