让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确保该标签在最上边。
让ie678支持css一些属性及html标签的更多相关文章
- IE6不支持CSS的属性选择器
input[type="text"] { width: 50px; } 测试IE6不生效,而IE7以上浏览器则没问题
- JavaScript CSS Style属性对照表
JavaScript CSS Style属性对照表 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom ...
- CSS Content 属性
content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...
- IE6支持兼容min-width、max-width CSS样式属性
IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...
- Flexible 弹性盒子模型之CSS flex-basis 属性
实例 设置第二个弹性盒元素的初始长度为 80 像素: div:nth-of-type(2){flex-basis:80px;} 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本 ...
- Flexible 弹性盒子模型之CSS flex-shrink 属性
实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...
- Flexible 弹性盒子模型之CSS flex-grow 属性
实例 让第二个元素的宽度为其他元素的三倍: div:nth-of-type(1){flex-grow:1;} div:nth-of-type(2){flex-grow:3;} div:nth-of-t ...
- css之属性部分
这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...
- 解决IE6不支持position:fixed属性
最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...
随机推荐
- 6.Type and Member Basics
1.The Different Kinds of Type Members 1.Constants:a symbol that identifies a never-changing data val ...
- ServiceStack.OrmLite 笔记9 -code first 必须的代码优先
复杂点的使用3 code first的使用,支持复杂类型 public enum PhoneType { Home, Work, Mobile, } public enum AddressType { ...
- MySQl的几个配置项
对对于MySQL的日志功能,我们可以完全自己控制到底写还是不写.一般来说,binlog我们一般会开启,而对于慢查询我们一般会在开发的时候调试和观 察SQL语句的执行速度.但今天发现一个问题.在使用sh ...
- java 解析汉字拼音
pinyin4j的使用很方便,一般转换只需要使用PinyinHelper类的静态工具方法即可: String[] pinyin = PinyinHelper.toHanyuPinyinStrin ...
- 如何设置table中<tr>和<td>的高度
//-----------------自定义表格table的行和列的宽和高----------------------// 先设置一个样式 如下: <style type="text/ ...
- Android 呼吸灯流程分析
一.Android呼吸灯Driver实现 1.注册驱动 代码位置:mediatek/kernel/drivers/leds/leds_drv.c 602static struct platform_d ...
- linux 试题
1. 在Linux系统中,以 文件 方式访问设备 . 2. 某文件的权限为:drw-r--r--,用数值形式表示该权限,则该八进制数为: 644 ,该文件属性是 目录 . 3. 前台起动的进程使用 C ...
- [js] 函数节流
原文链接:http://www.alloyteam.com/2012/11/javascript-throttle/
- [js] 前端性能优化
原文链接:http://www.cnblogs.com/xxcanghai/p/5205998.html 链接:http://www.zhihu.com/question/21658448/answe ...
- 关于图片加载非常爽的一个三方控件 fresco,一个三fresco
Hi EveryBody 今天来玩一个非常爽的控件 fresco 到底有多爽呢 接着看就知道了 首先 来看看fresco 是个神马东西 https://github.com/facebook/fre ...