搜索
首页web前端前端问答html5 IE不兼容怎么办

html5 IE不兼容怎么办

Jan 28, 2023 am 09:41 AM
html5

html5 IE不兼容的解决办法:1、使用JavaScript代码“while (i--){document.createElement(e[i])}”解决兼容问题;2、使用Google的html5shiv包解决IE不兼容HTML5标签即可。

html5 IE不兼容怎么办

本教程操作环境:Windows10系统、HTML5版、DELL G3电脑

html5 IE不兼容怎么办?

完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。

HTML5的新标签元素有:

  • 1aa9e5d373740b65a0cc8f0a02150c53定义页面或区段的头部;
  • c37f8231a37e88427e62669260f0074d定义页面或区段的尾部;
  • c787b9a589a3ece771e842a6176cf8e9定义页面或区段的导航区域;
  • 2f8332c8dcfd5c7dec030a070bf652c3页面的逻辑区域或内容组合;
  • 23c3de37f2f9ebcb477c4a90aac6fffd定义正文或一篇完整的内容;
  • 15221ee8cba27fc1d7a26c47a001eb9b定义补充或相关内容;

    

使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。以下就介绍几种方式。

方式一:Coding JavaScript

<!--[if lt IE9]> 
<script> 
   (function() {
     if (! 
     /*@cc_on!@*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(&#39;, &#39;);
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     } 
})() 
</script>
<![endif]-->

如果是IE9以下的IE浏览器将创建HTML5标签, 这样非IE浏览器就会忽视这段代码,也就不会有无谓的http请求了。

 第二种方法:使用Google的html5shiv包(推荐)

175036b059c08cfe0e939537257b7055 
9cf7fc12b64b9e15221a83d1b7b302422cacc6d41bbb37262a98f745aa00fbf0
1b771f47d72d900ba74308aee59557f0

但是不管使用以上哪种方法,都要初始化新标签的CSS.因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

但是如果ie6/7/8 禁用脚本的用户,那么就变成了无样式的"白板"网页,我们该怎么解决呢?

我们可以参照facebook的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面,用 html4 标签替换 html5 标签,这要比为了保持兼容性而写大量 hack 的做法更轻便一些。

9c9310510906c367d77326a69bdd2881 
2b0b25ff593c5b6c03403dd6234ffb2c
     c9ccee2e6ea535a969eb3f532ad9fe89.html5-wrappers{display:none!important;}531ac245ce3e4fe3d50054a55f265927
     0dcc676bcaca523de89d0760fc544da8您的浏览器禁用了脚本,请6170e8999ab19ec641e0422470b16d5c查看这里5db79b134e9f6b82c0b36e0489ee08ed来启用脚本!或者aa3476d4b82149a37c044d53c621d5db继续访问5db79b134e9f6b82c0b36e0489ee08ed.
     16b28748ea4df4d9c2150843fecfba68
f920f363442462683100636cb2662870
1b771f47d72d900ba74308aee59557f0

这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

推荐学习:《HTML5视频教程

以上是html5 IE不兼容怎么办的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
React的生态系统的大小:浏览复杂的景观React的生态系统的大小:浏览复杂的景观Apr 28, 2025 am 12:21 AM

TonavigateReact'scomplexecosystemeffectively,understandthetoolsandlibraries,recognizetheirstrengthsandweaknesses,andintegratethemtoenhancedevelopment.StartwithcoreReactconceptsanduseState,thengraduallyintroducemorecomplexsolutionslikeReduxorMobXasnee

React如何使用密钥有效地识别列表项目React如何使用密钥有效地识别列表项目Apr 28, 2025 am 12:20 AM

RectuseSkeyStoeficelyListifyListIdifyListItemsbyProvidistableIdentityToeachelement.1)keysallowReaeActTotRackChangEsInListSwithouterSwithoutreThoutreTheenteringTheEntirelist.2)selectuniqueandstablekeys,避免使用

在React中调试与密钥相关的问题:识别和解决问题在React中调试与密钥相关的问题:识别和解决问题Apr 28, 2025 am 12:17 AM

KeysinrectarecrucialforOptimizingTherEnderingProcessandManagingDynamicListSefectefection.tospotaTandFixKey与依赖的人:1)adduniqueKeykeystoliquekeystolistItemStoAvoidWarningSwarningSwarningSwarningSperformance和2)useuniqueIdentifiersIdentifiersIdentifiersIdentifiersFromdatainSteAtofIndicessuessuessessemessuessessemessemessemesseysemessekeys,3)

React的单向数据绑定:确保可预测的数据流React的单向数据绑定:确保可预测的数据流Apr 28, 2025 am 12:05 AM

React的单向数据绑定确保数据从父组件流向子组件。1)数据流向单一,父组件状态变化可传递给子组件,但子组件不能直接影响父组件状态。2)这种方法提高了数据流的可预测性,简化了调试和测试。3)通过使用受控组件和上下文,可以在保持单向数据流的同时处理用户交互和组件间通信。

在React组件中选择和管理密钥的最佳实践在React组件中选择和管理密钥的最佳实践Apr 28, 2025 am 12:01 AM

KeysinReactarecrucialforefficientDOMupdatesandreconciliation.1)Choosestable,unique,andmeaningfulkeys,likeitemIDs.2)Fornestedlists,useuniquekeysateachlevel.3)Avoidusingarrayindicesorgeneratingkeysdynamicallytopreventperformanceissues.

在React应用中使用USESTATE()优化性能在React应用中使用USESTATE()优化性能Apr 27, 2025 am 12:22 AM

USESTATE()ISCICIALFOROPTIMINECREACTAPPPERFORMACTACEUTOPACTONCACTONRE REDERSANDUPDATES.TOOPTIMIZE:1)USEUSECALLBACKTOMEMOEMOEIZEFUNCTIONSANDPREVENTUNNNNNNNNNNNNNNNNENESMARYRERER.2)limemememememoforcachingExpensiveComputations.3)

使用上下文和usestate()在组件之间共享状态使用上下文和usestate()在组件之间共享状态Apr 27, 2025 am 12:19 AM

使用Context和useState共享状态是因为它们可以简化大型React应用中的状态管理。1)减少propdrilling,2)代码更清晰,3)更易管理全局状态。但要注意性能开销和调试复杂性,合理使用Context和优化技术可以提升应用的效率和可维护性。

不正确键对React虚拟DOM更新的影响不正确键对React虚拟DOM更新的影响Apr 27, 2025 am 12:19 AM

使用不正确的键会导致React应用程序中的性能问题和意外行为。1)键是列表项的唯一标识符,帮助React高效地更新虚拟DOM。2)使用相同或不唯一的键会导致列表项重新排序和组件状态丢失。3)使用稳定且唯一的标识符作为键可以优化性能,避免全量重渲染。4)使用工具如ESLint来验证键的正确性。正确使用键可以确保React应用的高效和可靠性。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能