pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

如何讓IE9以下版本(ie6/7/8)認識html5元素_html5教程技

如何讓IE9以下版本(ie6/7/8)認識html5元素_html5教程技巧HTML5中文學(xué)習(xí)網(wǎng),是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網(wǎng)站、HTML5資訊、HTML5應(yīng)用、HTML5游戲、H
點評:瀏覽器不會給未知元素設(shè)定任何樣式(不同瀏覽器對元素會有不同的默認樣式)在IE9之前的版本中,也不能對未知元素設(shè)定樣式,針對這個問題有一個彌補方案,感興趣的朋友可以參考下哈

每個瀏覽器都有一份清單列舉自己所支持的HTML元素。不在清單上的元素都將被視為未知元素。瀏覽器不會給未知元素設(shè)定任何樣式(不同瀏覽器對元素會有不同的默認樣式)。在IE9之前的版本中,也不能對未知元素設(shè)定樣式。未知元素的DOM也顯示不正確,IE會在DOM中插入一個沒有子元素的空節(jié)點。所有你原本認為將會成為這個未知元素的子元素的元素會成為其兄弟節(jié)點。

針對這個問題有一個彌補方案,在使用里如article標(biāo)簽之前先用js創(chuàng)建一個虛假的article元素,IE就會識別這個元素了,而支持用css設(shè)定樣式。這個虛假元素甚至都不需要插入到DOM中。

請看如下的例子

復(fù)制代碼
代碼如下:

< !DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>unknown elements</title>
<style>
article{display:block;border: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,所以也不會有紅色邊框。

html5在IE6下效果

但是如果我們在head中加入一句js,情況立馬就不一樣了。

復(fù)制代碼
代碼如下:

<script type="text/javascript">
document.createElement("article");
</script>

IE6假裝它認識這個元素,正確顯示了效果。

IE6下html5正確效果

我們可以為所有新的HTML5元素都一次性創(chuàng)建一份虛假副本,以后就無需擔(dān)心那些不能良好支持HTML5的瀏覽器了。Remy Sharp的HTML5 enabling script就是幫助我們做這些事情的,該腳本的基本想法如下:

復(fù)制代碼
代碼如下:

<!--[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=0;i<e .length;i++){
document.createElement(e[i]);
}
</script>
< ![endif]-->

首先利用條件注釋判斷是不是IE9之前版本,如果是就執(zhí)行js。先把所有新標(biāo)簽寫入e數(shù)組中,然后遍歷整個數(shù)組,并創(chuàng)建副本。

該腳本已經(jīng)托管在Google Project Hosting上,你可以直接外鏈這個腳本:

復(fù)制代碼
代碼如下:

<!--[if lt IE 9]>
<script src="http://pic.html5code.net//html5shim.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->

另外,這段腳本需要放在頁面起始的部分,最好是head中,不要放在底部。這樣IE在解析頁面標(biāo)簽之前就會先運行這段代碼。


【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

主站蜘蛛池模板: 代理记账_免费注册公司_营业执照代办_资质代办-【乐财汇】 | 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | 橡胶接头_橡胶软接头_套管伸缩器_管道伸缩器厂家-巩义市远大供水材料有限公司 | 电位器_轻触开关_USB连接器_广东精密龙电子科技有限公司 | 高柔性拖链电缆-聚氨酯卷筒电缆-柔性屏蔽电缆厂家-玖泰电缆 | 六维力传感器_六分量力传感器_模腔压力传感器-南京数智微传感科技有限公司 | 学生作文网_中小学生作文大全与写作指导 | 高空重型升降平台_高空液压举升平台_高空作业平台_移动式升降机-河南华鹰机械设备有限公司 | 化妆品加工厂-化妆品加工-化妆品代加工-面膜加工-广东欧泉生化科技有限公司 | 全自动翻转振荡器-浸出式水平振荡器厂家-土壤干燥箱价格-常州普天仪器 | 东莞ERP软件_广州云ERP_中山ERP_台湾工厂erp系统-广东顺景软件科技有限公司 | 桥架-槽式电缆桥架-镀锌桥架-托盘式桥架 - 上海亮族电缆桥架制造有限公司 | 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 | 列管冷凝器,刮板蒸发器,外盘管反应釜厂家-无锡曼旺化工设备有限公司 | 大白菜官网,大白菜winpe,大白菜U盘装系统, u盘启动盘制作工具 | 2025世界机器人大会_IC China_半导体展_集成电路博览会_智能制造展览网 | 齿轮减速电机一体机_蜗轮蜗杆减速马达-德国BOSERL齿轮减速机带电机生产厂家 | 展厅设计公司,展厅公司,展厅设计,展厅施工,展厅装修,企业展厅,展馆设计公司-深圳广州展厅设计公司 | 游动电流仪-流通式浊度分析仪-杰普仪器(上海)有限公司 | 逗网红-抖音网红-快手网红-各大平台网红物品导航 | 小青瓦丨古建筑瓦丨青瓦厂家-宜兴市徽派古典建筑材料有限公司 | 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | 天津货架厂_穿梭车货架_重型仓储货架_阁楼货架定制-天津钢力仓储货架生产厂家_天津钢力智能仓储装备 | 求是网 - 思想建党 理论强党 | 药品/药物稳定性试验考察箱-埃里森仪器设备(上海)有限公司 | 江苏密集柜_电动_手动_移动_盛隆柜业江苏档案密集柜厂家 | 车间除尘设备,VOCs废气处理,工业涂装流水线,伸缩式喷漆房,自动喷砂房,沸石转轮浓缩吸附,机器人喷粉线-山东创杰智慧 | 重庆小面培训_重庆小面技术培训学习班哪家好【终身免费复学】 | 物流公司电话|附近物流公司电话上门取货 | 谷歌关键词优化-外贸网站优化-Google SEO小语种推广-思亿欧外贸快车 | 不锈钢水箱厂家,不锈钢保温水箱-山东桑特供水设备 | 气体热式流量计-定量控制流量计(空气流量计厂家)-湖北南控仪表科技有限公司 | 武汉高温老化房,恒温恒湿试验箱,冷热冲击试验箱-武汉安德信检测设备有限公司 | 首页 - 张店继勇软件开发工作室| 有福网(yofus.com)洗照片冲印,毕业聚会纪念册相册制作个性DIY平台 | 一路商机网-品牌招商加盟优选平台-加盟店排行榜平台 | 济南电缆桥架|山东桥架-济南航丰实业有限公司 | 物联网卡_物联网卡购买平台_移动物联网卡办理_移动联通电信流量卡通信模组采购平台? | 楼承板-开口楼承板-闭口楼承板-无锡海逵 |