如何让IE6及以上版本支持CSS 3.0!!

html-css010

如何让IE6及以上版本支持CSS 3.0!!,第1张

我今天要看的当然也是采用HTC文件,至于为什么可以这样,这就是IE当时在设计的时候就已经考虑到未来技术的兼容性问题(我的猜想而已^_^)。当然,你再网上看到的据说是完全兼容的HTC文件也只不过是重命名一下,或者某些大大们修改过的,增加了一些内容而已(内部其实是js代码,补充起来没有任何难度),并不是完全兼容的,至少我目前所发现的没有任何一个HTC文件可以让IE6完全兼容CSS 3.0,所以,部分CSS 3.0的属性才会支持,话不多说,看操作方法,我也是copy了一下别人的东西,没什么技术含量~使用是很容易的,看下面的示例代码:.box {-moz-border-radius: 15px/* Firefox */-webkit-border-radius: 15px/* Safari 和Chrome */border-radius: 15px/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器*/-moz-box-shadow: 10px 10px 20px #000/* Firefox */-webkit-box-shadow: 10px 10px 20px #000/* Safari 和Chrome */box-shadow: 10px 10px 20px #000/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器*/behavior: url(ie-css3.htc)/* 通知IE浏览器调用脚本作用于'box'类*/}可以看到,除了最后添加了behavior这么一句,CSS3属性还是那个CSS3属性,不需要化妆、修饰或是化身为变形金刚,这也是此方法的优点所在。!important 注意:毕竟不是浏览器自带的属性,使用时遇到问题在所难免,这里说一下一些注意事项,也可以说是方法的局限性吧:当前元素一定要有定位属性,像是position:relative或是position:absolute属性。

每个浏览器都有一份清单列举自己所支持的HTML元素。不在清单上的元素都将被视为未知元素。浏览器不会给未知元素设定任何样式(不同浏览器对元素会有不同的默认样式)。在IE9之前的版本中,也不能对未知元素设定样式。未知元素的DOM也显示不正确,IE会在DOM中插入一个没有子元素的空节点。所有你原本认为将会成为这个未知元素的子元素的元素会成为其兄弟节点。

针对这个问题有一个弥补方案,在使用里如article标签之前先用js创建一个虚假的article元素,IE就会识别这个元素了,而支持用css设定样式。这个虚假元素甚至都不需要插入到DOM中。

请看如下的例子:

复制代码

代码如下:

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title>unknown elements</title>

<style>

article{display:blockborder:1px solid red}

</style>

</meta></head>

<body>

<article>

<h1>welcome to feimos's blog</h1>

<p>This is your <span>first time to visit this webSite.</span></p>

</article>

</body>

</html>

IE6不会识别article,所以也不会有红色边框。

但是如果我们在head中加入一句js,情况立马就不一样了。

复制代码

代码如下:

<script type="text/javascript">

document.createElement("article")

</script>

IE6假装它认识这个元素,正确显示了效果。

我们可以为所有新的HTML5元素都一次性创建一份虚假副本,以后就无需担心那些不能良好支持HTML5的浏览器了。Remy Sharp的HTML5 enabling script就是帮助我们做这些事情的,该脚本的基本想法如下:

复制代码

代码如下:

<!--[if lt IE 9]>

<script type="text/javascript">

var e=("abbr,article,aside,audio,canvas,datalist,details,"+

"figure,footer,header,hgroup,mark,menu,meter,nav,output,"+

"progress,section,time,video").split(',')

for(var i=0i<e .lengthi++){

document.createElement(e[i])

}

</script>

<![endif]-->

首先利用条件注释判断是不是IE9之前版本,如果是就执行js。先把所有新标签写入e数组中,然后遍历整个数组,并创建副本。

该脚本已经托管在Google Project Hosting上,你可以直接外链这个脚本:

复制代码

代码如下:

<!--[if lt IE 9]>

<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

另外,这段脚本需要放在页面起始的部分,最好是head中,不要放在底部。这样IE在解析页面标签之前就会先运行这段代码。