zoukankan      html  css  js  c++  java
  • 关于box-shadow、border-radius不兼容ie8的解决办法

    本来从css3兼容ie9+挺好的,可是总有一些共识要求ie8+,于是就有了我们的苦逼的找解决办法。之前在网上查到一些说用 PIE.htc.

    But 我就是按照他说的写的没有管用。请教了一下别人才会写了。就我遇到的问题来说吧。

    先说 box-shadow:

    <style>

    .div{

    500px;

    height:200px;

    border: 1px solid #eaeaea;

    behavior: url(pie.htc);

     

    -moz-box-shadow: 0px 0px 14px 1px #eaeaea;

    -webkit-box-shadow: 0px 0px 14px 1px #eaeaea;

     box-shadow: 0px 0px 14px 1px #eaeaea;

    }

    </style>

    <div class="div">

       边框阴影
    </div>

    可是ie8下不支持就加上PIE.htc,注意上边的连接地址,需要注意的有两点:

        1.这个文件应该放到和.html文件同级位置。(下载地址:http://css3pie.com/download/

      这个就可以

         2.虽然文件名称是大写,如果确保路径没问题还不管用时候就试试小写

    border-radius:

    这个是在做上传头像时候。就是不管你的头像是什么形状,放进去后就是圆的,类似于这样

    里边的图片就是这样的,

    同样的

    <style>

    p{ 

     135px;

     height: 135px;

    border: 1px solid #ddd; 

    text-align: center; 

    behavior: url(pie.htc);

    border-radius: 50%; 

    overflow: hidden;

    }

    </style>

    <p>
    <img src="images/ac1.jpg" alt="" width="232">
    </p>

    可是ie8下不支持就加上PIE.htc,注意上边的连接地址,需要注意的有两点:

        1.这个文件应该放到和.html文件同级位置。(下载地址:http://css3pie.com/download/)

      这个就可以

         2.虽然文件名称是大写,如果确保路径没问题还不管用时候就试试小写

     最后找解决办法的时候发现PIE.htc这个还是可以解决好多属性值,因为没用到就不一 一说了,有兴趣的可以自己去查查。

    介绍htc,它可以让IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。。(可以参考这个  https://zhidao.baidu.com/question/2119635727166906667.html)
  • 相关阅读:
    BPM已经全面开启
    终于理解集线器、交换机、路由器之间的区别了
    Linux系统桥接模式下配置静态ip地址
    理解并手写Spring MVC框架
    Java 8 Funciton、Consumer、Predicate的作用及用法
    你想了解的分布式文件系统HDFS,看这一篇就够了
    分布式处理框架Hadoop的安装与使用
    CentOS7 中常用命令
    VMware安装Centos7并联网使用
    理解Spring AOP的实现方式与思想
  • 原文地址:https://www.cnblogs.com/zxhh/p/6825500.html
Copyright © 2011-2022 走看看