• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
pengpenglin
乐于工作,享受生活。
博客园    首页    新随笔    联系   管理    订阅  订阅
让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确保该标签在最上边。

 

posted on 2015-04-10 10:58  pengpenglin  阅读(331)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3