ie8兼容圆角透明度

前端开发遇到一些项目要兼容IE浏览器是比较头疼的，尤其是对IE8简直是憎恶至极，很多时候需要找各种资料去解决，这里就来谈谈兼容IE8用到的一种

首先介绍一下常规的解决方法：

1、IE8兼容圆角

　　很多时候会用背景图片代替，我自己就曾经这么做过，但是写的代码多了，就会发现这是一个非常low的做法

2、IE8兼容透明度

　　这里看一段样式代码，opacity在不同浏览器兼容的方式不一样

.opacity{
  filter:alpha(opacity=50); /* IE */
  -moz-opacity:0.5; /* 老版Mozilla */
  -khtml-opacity:0.5; /* 老版Safari */
  opacity: 0.5; /* 支持opacity的浏览器*/
}

但是很早之前项目中遇到一个追求完美的设计，要实现圆角的同时还需要用到透明度，这时候就只能网上查资料找方法，当然肯定有解决的办法，就是引入PIE.HTC。

下载地址：ie-css3.htc

下面看下自己试验的demo文件

<div class="test">
    <div class="f1"></div>
    <div class="f2">
        文字ffffffffffffffffffff
    </div>
</div>

.test{
    position: relative;
    margin: 100px auto auto;
    width: 200px;
    height: 200px;
    
}

.test .f1{
    position: absolute;
    z-index:99;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.1);
    -pie-background: rgba(0,0,0,.1);
    behavior: url(htc/PIE.htc);
    border-radius: 10px;
}

.test .f2{
    font-weight: bold;
}

注意：

1、behavior的url里一定要填写ie-css3.htc的绝对路径，因为 IE浏览器找该文件是相对当前html文件路径来找的，所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。

2、一定要有定位属性：position

文章供参考学习使用，比较简单，自己写一下就会了

 

转载于:https://www.cnblogs.com/shenpeng/p/10072734.html