让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;
    width: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;
    width: 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 {
    width: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确保该标签在最上边。

 

转载于:https://www.cnblogs.com/pengpenglin/p/4413959.html