让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 表达式), ...
随机推荐
- VSFTP安全加固
这几天在公司需要做基线安全,一直都没有经验,所以在网上找了一些,做来参考学习. vsftp配置详解 这里是对vsftp配置文件的详细解释,主要参考了<RedHat8.0网络服务>一书中&l ...
- sqlserver前面加N解释
From : http://lzde360.blog.163.com/blog/static/6780720820111026112033917/ 加上 N 代表存入数据库时以 Unicode 格式存 ...
- MYSQL中的SELECT查询时进行运算
SELECT在mysql中是查询表中的数据的作用,但也可以在查询的时候直接进行运算,然后返回查询后的结果 比如 )) FROM username2 其中的IFNULL函数是对adven数据进行判断,若 ...
- 初始Hibernate框架技术
hibernate: 定义:ORM:Object Relational Mapping 对象 关系 映射 使用hibernate时几个必要的: 1.实体类 2.映射文件(类 -数据库表,属性-字段) ...
- Redis配置文件之————redis.conf配置及说明
基本设置 1. 备释当配置中需要配置内存大小时,可以使用 1k, 5GB, 4M 等类似的格式,其转换方式如下(不区分大小写):1k =< 1000 bytes1kb =< 1024 by ...
- Java用通配符 获得泛型的协变和逆变
Java对应泛型的协变和逆变
- ios7适配一些问题以及64位32位
ios7适配一些问题(http://www.cocoachina.com/ios/20130703/6526.html) 1.iOS应用如何实现64位的支持 http://www.codeceo.co ...
- [css] 认识margin
原文链接http://www.zhangxinxu.com/wordpress/2009/08/css-margin%E7%9A%84%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80 ...
- Spring Boot 以 jar 包方式运行在后台
spring-boot jar 包方式启动: 首先,为了防止和常用的 Tomcat 8080 端口冲突,将 Spring-boot 项目的端口号设置为 9090. 具体方法:在 application ...
- 修改jsp文件tomcat发布失败(Could not delete May be locked by another process)
突然项目修改jsp文件后,tomcat不能发布, Publishing failed with multiple errors Could not delete D:/Tomcat 6.0/web ...