昨天写的一个页面,用的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确保该标签在最上边。
时间: 2024-11-10 14:24:45