让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确保该标签在最上边。

时间: 2024-11-10 14:24:45

让ie678支持css一些属性及html标签的相关文章

第五章-css常用属性

第五章 CSS常用属性 1. span标签 突显,强调局部文字的作用. 2.字体样式 font-size: 字体大小 font-style:normal,italic(倾斜) font-weight:normal,bold(加粗) font-familty:字体类型(楷体) font:样式 粗细 字体大小 字体类型. 3.文本样式 color: 文本样式 text-align: 水平对齐方式(left,center,right) text-indent: 首行缩进 line-height: 行高

IE6支持兼容min-width、max-width CSS样式属性

IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定一定宽度范围值,有时需要设置一个最小宽度,接下来由DIVCSS5为大家总结的解决IE6不支持min-width和不支持max-width的方法.以下为CSS 宽度之IE6支持最小宽度.最大宽度解决技巧(你可能需要进一步详细了解CSS width知识). 目录 IE6支持max-width解决方法 I

CSS position 属性

实例 定位 h2 元素: h2 { position:absolute; left:100px; top:150px; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有主流浏览器都支持 position 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.

Flexible 弹性盒子模型之CSS justify-content 属性

实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本. 属性           justify-content 29.021.0 -webkit- 11.0 28.018.0 -moz- 9.06.1 -we

CSS align-content 属性

实例 对齐弹性盒的 <div> 元素的各项: div { display: flex; flex-flow: row wrap; align-content:space-around; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本. 属性           align-content 21.0 11.0 28.0 9.07.0 -webkit- 12.1 定义和用

Flexible 弹性盒子模型之CSS flex-shrink 属性

实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本. 属性           flex-shrink 29.021.0 -webkit- 11.010.0 -ms- 28.018.0 -moz- 9.06.1 -webkit- 17.0 定义和用法 flex-shri

css之属性部分

这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. 边框样式border-style 属性用来定义边框的样式 none: 默认无边框 dotted: dotted:定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界. 两个边界的宽度和border-width的值相同 groove: 定义3D沟槽

Flexible 弹性盒子模型之CSS flex-basis 属性

实例 设置第二个弹性盒元素的初始长度为 80 像素: div:nth-of-type(2){flex-basis:80px;} 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本. 属性           flex-basis 29.021.0 -webkit- 11.010.0 -ms- 28.018.0 -moz- 9.06.1 -webkit- 17.0 定义和用法 flex

Flexible 弹性盒子模型之CSS flex-grow 属性

实例 让第二个元素的宽度为其他元素的三倍: div:nth-of-type(1){flex-grow:1;} div:nth-of-type(2){flex-grow:3;} div:nth-of-type(3){flex-grow:1;} 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本. 定义和用法 flex-grow 属性用于设置或检索弹性盒的扩展比率.. 注意:如果元