让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 表达式), ...
随机推荐
- Creating HTML table with vertically oriented text as table header 表头文字方向
AS an old question, this is more like info or reminder about vertical margin or padding in % that ta ...
- 常用CMD命令
查看电脑最大支持多大的内存: wmic memphysical get maxcapacity 查询DNS: nslookup a.root-servers.net 路由线路: ...
- C# 获取打印机列表以及串口
C# 获取打印机列表以及默认打印机.串口列表. /// <summary> /// 获取本地已安装的打印机 /// </summary> /// <returns> ...
- GBASE结构理解
GBASE数据库 8a 8a Cluster 8t 8m BI 8d 8 分析型数据库 分布式并行数据库集群 高端事务性数据库 高速内存数据库 可视商业智能 大型目录服务体系 硬加密安全数据库 数据分 ...
- SQL HAVING语句
HAVING 子句 在 SQL 中增加 HAVING 子句原因是,WHERE 关键字无法与合计函数一起使用. SQL HAVING 语法 SELECT column_name, aggregate_f ...
- 个人作业Week 2 ----------代码的规范和代码复审
1.是否需要有代码规范 从个人理解的角度出发,我认为代码规范还可以细分为代码的风格还有代码的结构设计(就好比排版一类的) 以前在上C语言课程的时候就看到过,老师会在打“{”的时候进行一个换行,但是有些 ...
- 记CVTE2014年春季招聘实习生求职历程
进度:目前已经过了网测 明天一面,好紧张,人生第一次实习面试.据说只有一分钟. 网测; 首先在http://exam.cvte.com/ 注册了账号,然后填写相关的个人信息,这里要仔细填写,因为它最后 ...
- springmvc:frameServletBean
1.httpservlerBean 主要初始化web.xml的init-param参数 2.frameWorkServlet 该类作用 1.applicationConetxt用于配置整体 webap ...
- 用JS打开网页时自动更改css样式,可用于处理浏览器兼容
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- Sqlerver_各类函数
SQL Aggregate 函数 SQL Aggregate 函数计算从列中取得的值,返回一个单一的值. 有用的 Aggregate 函数: AVG() - 返回平均值-SELECT AVG(colu ...