zoukankan      html  css  js  c++  java
  • 让ie678支持css一些属性及html标签

     昨天写的一个页面,用的css3及html5的一些样式与标签,在ie8下看是没有效果的,然后就在晚上查找了一下如何能让ie8也能实现这些效果。

    1.添加respond.js文件,Respond.js让IE6-8支持CSS3 Media Query。

    2.实现html5的标签:html5shiv.js文件,让IE(包括IE6)支持HTML5元素 

    respond.js和html5shiv.js的在线地址:

    <!-[if IE]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <![endif]->
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    3.在ie8(6,7)下实现css3的圆角和隐形效果,添加ie-css3.htc文件,ie-css3的使用方法很简单,在你需要使用css3的样式里加入behavior: url(js/ie-css3.htc);就可以了

    <div id="box_2"></div>
    
    <div id="box_3">
        <h1>文字效果</h1>
        <p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
    </div>
    
    #box_2 {
        border:#A2BFE0 solid 5px;
        100%;
        height:500px;
        border-radius:10px;
        behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
        background:#fff;
        box-shadow: 10px 10px 5px #888888;
    }
    
    #box_3 {
        border: #A2BFE0 solid 5px;
         100%;
        height: 500px;
        border-radius: 10px;
        behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
        background: #fff;
        box-shadow: 10px 10px 5px #888888;
    }
    
    #box_3 h1 {
        text-shadow: 5px 5px 5px #FF0000;
        behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);
    }
    
    p.test {
        11em; 
        border:1px solid #000000;
        word-wrap:break-word;
        behavior: url(http://fetchak.com/ie-css3/ie-css3.htc);  //ie-css3.htc的路径
    }
    

     都可以看到圆角。并且有阴影效果。

    但是:1.如果想对图片进行圆角设置,只能是将图片变成背景图片展示。2.阴影颜色不能控制,显示的是默认的黑色,

    某位大牛还说是要在该标签上添加position:relative(absolute),及z-index确保该标签在最上边。

  • 相关阅读:
    阿里云nginx创建多站点
    linux 卸载php mysql apache
    centos php环境搭建
    jquery simple modal
    nodejs 安装express
    nodejs fs.open
    nodejs supervisor
    nodejs 运行
    nodejs shell
    PHP array_pad()
  • 原文地址:https://www.cnblogs.com/pengpenglin/p/4413959.html
Copyright © 2011-2022 走看看