PIE(解决IE9以下圆角等兼容性问题)

whlong 发布于2019-08-29 11:26 / 2010人阅读

摘要：一能使支持的一些属性，例如圆角，阴影等。具体的使用可详见使支持圆角盒阴影与渐变渲染三的使用在网页中加入脚本。注意，用专用的注释，防止非浏览器下载。以下代码在及以上浏览器可正常显示。

一、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语句问题在线等兼容性问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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