码迷,mamicode.com
首页 > Web开发 > 详细

让ie678支持css一些属性及html标签

时间:2015-04-10 13:07:03      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:

 昨天写的一个页面,用的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确保该标签在最上边。

 

让ie678支持css一些属性及html标签

标签:

原文地址:http://www.cnblogs.com/pengpenglin/p/4413959.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!