`

ie html5 css3

 
阅读更多

微软出的IE9支持HTML5,但因为不支持XP系统,暂时我还用不了。

即使能用,现阶段如果开发HTML5页面,并考虑到兼容性问题的话,恐怕也得让自己的界面支持IE6-8吧。

首先,需要让IE支持HTML5标签。这个简单,随便在网上搜一下就能找到。下载一个html5.js,并拷贝到自己的目录里就可以了。

现在写一段简单代码,其功能是在页面上放置一个canvas,并画一个红色圆圈。

复制代码
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <HTML>
 3  <HEAD>
 4   <TITLE> IE8支持HTML5+CSS3 </TITLE>
 5 <head>
 6 
 7 <style type="text/css"> 8 body { 9     background: #444;10     color: #FFF;11     font-family: Helvetica, Arial, sans-serif;12     text-align: center;13 }14 15 #cv {16     width: 600px; height: 400px;17     background: #000;18     border-radius: 20px;19     padding: 20px;20     margin: 20px auto;21     box-shadow: 0 0 40px #222;22 }23 </style>
24 
25 <script type="text/javascript">26 function test() {
27 var ctx = document.getElementById("cv").getContext("2d");
28 29   ctx.fillStyle = "#aa0000";
30   ctx.beginPath();
31   ctx.arc(100, 100, 25, 0, Math.PI*2, true);
32   ctx.closePath();
33   ctx.fill();
34 }
35 36 window.onload = test;
37  </script>
38 
39 </head>
40 
41 <body>
42 <canvas id="cv"></canvas>
43 </body>
复制代码

段代码,在遨游和Firefox上,都可以用。但在IE8里,不但什么都没有,下面状态栏里还会显示黄色小叹号,点开,告诉我们,ctx根本没取到canvas。

 

第一步,我们加上对html5的支持。

<!--[if IE]>
    <script src="/public/html5.js" type="text/javascript"></script>
<![endif]-->

现在再看,会出现一个黑漆漆的框框,说明IE8已经认识canvas标签了。但红圈圈还是没出来,下面状态栏仍然提示我们JS里压根没取到canvas。这说明IE还只是认识了canvas是个合法标签而已,至于怎么处理它,对不起,俺还不会。

 

第二步,加上对canvas的支持。

下载excanvas_r3.zip,解压后,把excanvas.compiled.js拷贝到自己的目录里,引用它。现在看看,哈,一个红色圈圈出现了!js works!

<!--[if IE]>
    <script type="text/javascript" src="/public/html5.js"></script>
    <script type="text/javascript" src="/public/excanvas.compiled.js"></script>
<![endif]-->


如果您足够细心,您会发现,样式表中存在这么两行:

    border-radius: 20px;
    box-shadow: 0 0 40px #222;

这是CSS3的样式哦!border-radius说明我们要的黑框框四周应该是圆角才对,但现在却四愣八插的;box-shadow那儿还有shadow呢。。。

 

下面是第三步,让IE支持CSS3。在cv选择器的最后,增加一句话

behavior: url(/public/ie-css3.htc);
复制代码
#cv {
    width: 600px; height: 400px;
    background: #000;
    border-radius: 20px;
    padding: 20px;
    margin: 20px auto;
    box-shadow: 0 0 40px #222;
    behavior: url(/public/ie-css3.htc);}
复制代码

其中,ie-css3.htc去 http://fetchak.com/ie-css3/ 下载,具体它能够支持多少CSS3特性,网站说的很清楚,我就不费口舌了。

 

最后,在我们下载了三个文件,增加了三句话之后,看看效果吧。嘻嘻!

分享到:
评论

相关推荐

    让IE8和IE9支持Html5和Css3

    标题"让IE8和IE9支持Html5和Css3"指的是一个目标,即如何在不支持新特性的旧版IE浏览器上实现Html5和Css3功能。这个压缩包提供了一些关键的JavaScript库,帮助解决这个问题。 首先,`css3-mediaqueries.js`是针对IE...

    ie6实现css3属性

    为了进一步理解这个主题,你可以解压并查看这些文件,它们可能包括HTML、CSS和JavaScript代码,展示了如何在IE6中实现类似CSS3的效果。在实际项目中,通常建议尽可能避免对旧版本浏览器的特殊适配,转而采用渐进增强...

    ie-css3.htc 免费版

    ie-css3.htc是一种行为复合内容(Behavior Composite Content)文件,它是微软在Internet Explorer中引入的一种技术,允许HTML元素通过链接外部的HTC文件来实现某些特定的脚本功能。在本例中,ie-css3.htc是一个...

    让ie也支持css3

    总的来说,为了让IE支持CSS3,开发者需要理解`.htc`文件的工作原理,以及如何利用`behavior`属性将这些文件与HTML元素关联起来。尽管这种方法在某些场景下是有效的,但随着现代浏览器的普及和IE市场份额的减少,...

    兼容IE8插件(兼容h5+css3新特性)

    这是一个对IE8及以下做前端兼容的文件工具...--对于ie6到ie8做兼容,兼容h5,css3等新特性--&gt; &lt;!--[if (gte IE 6)&(lte IE 8)]&gt; [removed][removed] [removed][removed] [removed][removed] &lt;![endif]--&gt;

    ie8兼容h5css3解决方案

    IE8,作为一款老版本的Internet Explorer,不支持HTML5和CSS3的新特性,这为开发者带来了不少挑战。针对这种情况,开发者通常需要寻找特定的解决方案来实现对这些新特性的模拟,以便在IE8上也能正常显示和运行。以下...

    IE兼容CSS3

    Modernizr是一种开源工具,它可以检测浏览器对HTML5和CSS3特性的支持情况,并根据检测结果动态添加相应的类到HTML元素上,这样我们就可以针对不同的浏览器实现特性检测和降级处理。 一句JS代码如下: ```...

    ie-css3(让ie6 ie7 ue8支持css3).rar

    5. **使用方法**:通常,开发者会在CSS文件中通过`behavior`属性引用.htc文件,如`-ms-behavior: url(/path/to/ie-css3.htc);`。这种方法有一定的局限性,如性能问题、跨域限制以及不支持所有CSS3特性。 6. **替代...

    让IE兼容CSS3

    IE6至IE8不支持很多CSS3特性,这是因为它们基于较旧的渲染引擎,而IE9及以后版本虽然改进了对CSS3的支持,但仍无法与现代浏览器相提并论。因此,开发者需要采取一些策略来解决这个问题。 **解决方案1:使用条件注释...

    让IE8以下兼容HTML5标签和CSS3高级选择器

    在开发Web应用时,我们经常会遇到一个问题:如何确保在IE8及以下版本的浏览器中实现对HTML5新标签和CSS3高级选择器的良好兼容性。这些老版本的Internet Explorer(尤其是IE8)并不原生支持许多HTML5特性及CSS3的新...

    IE支持CSS3 HTML5插件

    标题中的“IE支持CSS3 HTML5插件”指的是在Internet Explorer(简称IE)浏览器中,由于其自身对CSS3和HTML5新特性的支持不足,需要借助特定的插件来实现对这些现代Web标准的兼容。这两项技术,CSS3和HTML5,是Web...

    让IE6、IE7、IE8支持CSS3的圆角、阴影样式

    在早期的Internet Explorer浏览器,即IE6、IE7和IE8,它们并不支持CSS3的一些新特性,如圆角和阴影效果。这些特性在现代浏览器中已经非常常见,可以为网页设计提供更丰富的视觉体验。为了让这些老版本的IE浏览器也能...

    iecss3.htc支持输入框圆角

    总的来说,"iecss3.htc"是一个针对旧版IE浏览器实现CSS3圆角的兼容性解决方案,虽然现在其重要性已不如从前,但在处理老项目或照顾到仍然使用旧版IE的用户时,它仍是一个有价值的工具。然而,随着技术的进步,我们...

    解决ie9、ie10本地css加载不上的解决方法实例

    7. **使用Modernizr**:Modernizr是一个JavaScript库,可以帮助检测浏览器对各种HTML5和CSS3特性的支持情况,从而实现优雅降级或渐进增强。 8. **调试工具**:利用IE9和IE10内置的开发者工具(按下F12键打开),...

    ie支持css3部分功能

    然而,IE(Internet Explorer)浏览器,特别是早期版本,对CSS3的支持并不完全,这使得开发者在创建跨浏览器兼容的网站时面临挑战。本文将详细探讨如何使IE支持CSS3的部分功能,包括阴影背景效果、圆角效果和渐变...

    css区别IE和非IE浏览器

    - **使用前缀:** 对于支持CSS3特性的浏览器,可以使用浏览器特定的前缀(如`-webkit-`、`-moz-`等),以确保这些特性能够在目标浏览器中正确渲染。 - **使用Polyfill:** 对于一些新出现的CSS特性,可以使用Polyfill...

    ie6下可以用的css3

    1. PIE_uncompressed.htc:这是CSS3 Pie的核心文件,它是一个行为组件(Behavior Component),通过HTC(HTML Components)技术,将JavaScript代码嵌入到HTML文件中,使得IE可以理解CSS3的属性。 2. PIE_...

    让ie6,7,8支持canvas,css3等主流html5技术

    标题中的“让ie6,7,8支持canvas,css3等主流html5技术”涉及到的是在旧版Internet Explorer(IE6、IE7、IE8)上实现HTML5新特性的兼容性问题。这些浏览器并不原生支持HTML5的新功能,如Canvas画布和CSS3,但可以通过...

    ie8兼容html5 css3圆角阴影渐变placeholder等属性

    标题中的“ie8兼容html5 css3圆角阴影渐变placeholder等属性”指的是在IE8浏览器上实现HTML5和CSS3的一些新特性,包括圆角、阴影、渐变以及placeholder属性的支持。这些特性在现代浏览器中是标准支持的,但在较旧的...

Global site tag (gtag.js) - Google Analytics