让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 表达式), ...
随机推荐
- 安装 SQLManagementStudio_x86_CHS(SQL Server Management Studio) 老提示重启的解决办法
安装 SQL Server Management Studio(SQLManagementStudio_x86_CHS)时,检测时不通过,提示重启电脑,我以为她安装了什么心软件没有重启:所以重启了电脑 ...
- ,2,liunx命令格式
一.命令基本格式 ~用户的初始登录位置 /root 这个叫root用户的家目录,每个用户都有自己的家 超级用户的家是根目录,普通用户的家是home下的二级目录 :/home/uer1 pwd ...
- lazyload懒加载的使用
1.引用<script src="http://a.tbcdn.cn/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?2 ...
- 再学C++之C++中的全部关键字
/*______C++全部关键字___________*/ asm do if return try auto double inline short typedef bool dynamic_cas ...
- android的简单入门学习
话说光配环境就整死我了, 不是说多么难, 是最近google被屏了, 很多sdk里面需要下载的东西都下不下来, 坑爹啊. 最后跟扫拉稀要了一个他配置好的,才运行了. android目录分析: ass ...
- ToStringBuilder 学习
一.简介与引入 1.ToStringBuilder.HashCodeBuilder.EqualsBuilder.ToStringStyle.ReflectionToStringBuilder.Co ...
- Android Fast ImageLoader
前段时间写的Android平台开源项目:Fast ImageLoader,现在分享给大家 源码地址:https://github.com/cumtkangyi/Android-Fast-ImageLo ...
- 进程&线程
进程与线程的区别 什么是进程(Process):普通的解释就是,进程是程序的一次执行,而什么是线程(Thread),线程可以理解为进程中的执行的一段程序片段.在一个多任务环境中下面的概念可以帮助我们理 ...
- Android广播BroadcastReceiver 二
BroadcastReceiver: 在Android中,Broadcast是一种广泛运用的在应用程序之间传输信息的机制.而BroadcastReceiver是对发送出来的 Broadcast进行过滤 ...
- C# winform解决解决窗体第一次设置为最大化后,点击最大化按钮窗体无法居中问题
public frmMain() { InitializeComponent(); //解决窗体第一次设置为最大化后,点击最大化按钮窗体无法居中问题 int x = Convert.ToInt32(( ...