PIE(解決IE9以下圓角等兼容性問題)

whlong 發布于2019-08-29 11:26 / 2012人閱讀

摘要：一能使支持的一些屬性，例如圓角，陰影等。具體的使用可詳見使支持圓角盒陰影與漸變渲染三的使用在網頁中加入腳本。注意，用專用的注釋，防止非瀏覽器下載。以下代碼在及以上瀏覽器可正常顯示。

一、PIE

PIE能使IE6-9支持CSS3的一些屬性，例如圓角，陰影等。它分為pie.htc和pie.js兩種用法。

二、pie.htc的使用

在css片段里面加上behavior，例如

.logo{font-size:12px;behavior: url(path/to/pie_files/PIE.htc);}

需要注意的是， behavior 的路徑是相對html的，而不是相對所在的css文件。具體的使用可詳見PIE使IE支持CSS3圓角盒陰影與漸變渲染

三、pie.js的使用

在網頁中加入PIE.js腳本。注意，用IE專用的注釋，防止非IE瀏覽器下載。

用js調用

  $(".purchase>a").each(function() {
      $(this).css("position", "relative");//設置position屬性，否則無法覆蓋
      PIE.attach(this);
  });

注意點：

IE下這些CSS3效果實現是借助于VML，由VML繪制圓角或是投影效果的容器元素，然后這個容器元素作為目標元素的后兄弟節點插入，如果目標元素position:absolute 或是 position:relative，則這個css3-container元素將會設置與之一樣的z-index值，在DOM tree中，同級的元素總是后面的覆蓋前面的，所以這樣就實現了覆蓋，又避免了可能有其他元素正好插入其中。所以，如果目前元素的position屬性為static，也就是默認屬性，則z-index屬性是沒有用的，無覆蓋可言，所以此時IE瀏覽器下CSS3的渲染是不會成功的。要解決也很簡單，設置目標元素position:relative或是設置祖先元素position:relative并賦予一個z-index值（不可為-1）。

添加陰影時，需設置一個背景色。否則，陰影將會覆蓋整個背景。以下代碼在IE9及以上瀏覽器可正常顯示。

 .dis_a:hover {
   box-shadow: 0px 5px 30px rgb(204, 204, 204);   
   transform: translate3d(0, -8px, 0);
   -webkit-transform: translate3d(0, -8px, 0);
   cursor: pointer;
   }

但是在IE9以下瀏覽器，使用PIE.js制作陰影效果如下。陰影似乎覆蓋了整個背景。

 但是在以上的CSS代碼中添加一個白色的背景色時，`background: rgb(255, 255, 255);`,能正常顯示陰影

實現背景透明度需要在js中額外添加一行代碼，同時css中額外添加 -pie-background: rgba(60, 125, 166, .9);才能實現。

$(".nav_bg").each(function() {
        PIE.attach(this);
        $(this).prev("css3-container").css({
               "filter": "alpha(opacity=0.9)",
               "opacity": 0.9
       });
  });

云服務器 GPU云服務器如何解決兼容問題?Win11僅支持1個I ie8 出錯 ie9沒有問題 sql語句問題在線等兼容性問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111650.html

the compatibility problem of ie

摘要：下的兼容問題處理背景透明，圓角，和支持部分選擇器例如支持的語義化標簽，媒體查詢等。在頁面頭部優先加載需要的插件，因為部分插件需要依賴所以需要最先加載。注意順序，插件優先添加。這個路徑是相對的路徑。 ie8hack ie8下的兼容問題處理：背景透明，css3圓角，css3和jquery支持部分css3選擇器（例如：nth-child）,支持html5的語義化標簽，媒體查詢@media等。...

DobbyKim 2019-08-30 13:00 評論0 收藏0
the compatibility problem of ie

摘要：下的兼容問題處理背景透明，圓角，和支持部分選擇器例如支持的語義化標簽，媒體查詢等。在頁面頭部優先加載需要的插件，因為部分插件需要依賴所以需要最先加載。注意順序，插件優先添加。這個路徑是相對的路徑。 ie8hack ie8下的兼容問題處理：背景透明，css3圓角，css3和jquery支持部分css3選擇器（例如：nth-child）,支持html5的語義化標簽，媒體查詢@media等。...

GeekQiaQia 2019-08-01 15:12 評論0 收藏0
關于瀏覽器兼容

摘要：第二個子節點第三個子節點以此類推盒子陰影失效盡管背景是白色，最好還是設置一下，不然兼容后的效果可能會不太理想透明色失效有默認在文件中控制一下就好了，如順便介紹一下過濾器，是一種用來過濾不同瀏覽器的類型。一、火狐1. 失效hack：采用jquery UI：datepicker插件。（1）下載插件,放置在項目文件夾中；（2）在所需頁面引入，如：此script與頁面所需的對應的j...

RdouTyping 2019-08-29 16:05 評論0 收藏0
關于瀏覽器兼容

摘要：第二個子節點第三個子節點以此類推盒子陰影失效盡管背景是白色，最好還是設置一下，不然兼容后的效果可能會不太理想透明色失效有默認在文件中控制一下就好了，如順便介紹一下過濾器，是一種用來過濾不同瀏覽器的類型。一、火狐1. 失效hack：采用jquery UI：datepicker插件。（1）下載插件,放置在項目文件夾中；（2）在所需頁面引入，如：此script與頁面所需的對應的j...

shenhualong 2019-08-02 11:00 評論0 收藏0