IE没有样式化HTML5标签(带shiv)

关于这个问题，我们可以使用HTML5 Shiv来解决IE浏览器不识别HTML5标签的问题。HTML5 Shiv是一个JavaScript库，可以帮助IE浏览器识别并兼容HTML5元素。

HTML5 Shiv的使用方法如下：

首先，在HTML文档的<head>标签中引入HTML5 Shiv库。可以使用以下代码：

<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

在CSS中，为HTML5元素添加样式。例如，为<article>、<aside>、<figcaption>等元素添加样式：

article, aside, figcaption {
  display: block;
}

通过以上步骤，IE浏览器就可以正确识别并呈现HTML5标签了。

需要注意的是，虽然HTML5 Shiv可以解决IE浏览器不识别HTML5标签的问题，但是IE浏览器对于一些HTML5新特性的支持仍然有限，因此在开发过程中需要注意兼容性问题，并尽可能使用浏览器兼容的方案。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

腻子脚本 — HTML5Shiv

越来越多的站点开始使用 HTML5 标签。但是目前的情况是还有很多人在使用IE6，IE7，IE8。而IE6，IE7，IE8是不能识别 HTML5 标签的。...这里提供一种让 IE 浏览器支持 HTML5 的方法，那就是使用 HTML5Shiv。 HTML5Shiv 主要解决 HTML5 提出的新的元素不被IE6-8识别。...article> 定义正文或一段完整的内容定义补充或相关内容使用他们能让代码语义化更直观，而且更方便 SEO 优化，但是此 HTML5 新标签在 IE6/IE7/IE8 上并不能识别...实现原理　　这些 HTML5 新元素不能被 IE6-8 识别，不能作为父节点包裹子元素，并且不能应用 CSS 样式。...然而微软近期才表态要在 IE 中支持 HTML5,以致到今天为止的 IE8 及以下是无法支持 HTML5 标签的.

6841 0

使用 HTML5 Shiv 让 IE 支持 HTML5

IE 无法渲染 HTML5 样式 IE 的用户完全不是我们的目标用户，但是总有人有人说我们网站显示的乱七八糟，很烂，因为 IE 不知道如何给不能识别的标签或者元素渲染 CSS，比如这些...IE 无法识别的标签，我们在 CSS 中定义的样式，IE 就无法渲染，所以还是决定让 iPad 导航至少在 IE 下能够布局正常一点。...前面说了 IE 对 HTML5 标签无法识别，所以无法渲染样式，而 Sjoerd Visscher 发现一种方法可以强制 IE 渲染 HTML5 标签，当你创建一个新的 DOM 元素（名字和它无法识别的标签相同... remy sharp 整理了一个迷你的脚本 html5.js，通过上面的方法让 IE 支持所有的 HTML5 标签。...HTML5 Shiv 使用 html5.js 必须在页面head元素内调用（因为 IE 必须在元素解析前知道这个元素，所以这个 JS 文件不能在页面底部调用。）

1.8K1 0

BootStarp模版

-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> Bootstrap基本模板 <link href="../.....minimum-scale 允许用户的最小缩放值，为一个数字，可以<em>带</em>小数 maximum-scale 允许用户的最大缩放值，为一个数字，可以<em>带</em>小数 height 设置layout...-- <em>HTML5</em> Shim 和 Respond.js 用于让 <em>IE</em>8 支持 <em>HTML5</em>元素和媒体查询 --> </script

1.9K1 0

Bootstrap

-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!

6.5K3 0

HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

1.2K10 0

前端面试【HTML】— Canvas常用API有哪些，其兼容性如何解决？

IE 9 之前版本通过 createElement 创建 html5 新标签； (function() { if (!...--[if lt IE 9]> 不管使用以上哪种方法，都要初始化新标签的CSS。因为HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局。...article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block} 如果IE 6/7/8 禁用脚本的用户，那么就变成了无样式的..._fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。 <!

6162 0

常见的兼容性问题

初始化样式因浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，如果不初始化会造成不同浏览器之间的显示差异，布局出现错乱，所以要初始化样式，达到统一的布局。...最粗暴的方案就是使用*初始化样式，但是其会对于所有的标签加载样式以及计算样式优先级，可能会对性能有所影响。...标签对于IE9以下浏览器不支持HTML5新标签的问题，可以使用document.createElement创建元素并设置其CSS样式即可，通常使用html5shiv.js来作为兼容性解决方案。.../3.7.3/html5shiv.min.js"> placeholder兼容性 placeholder是html5新增的一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中..."> <script type="text/javascript" src="https://cdn.bootcss.com/html5<em>shiv</em>/3.7.3/html5<em>shiv</em>.min.js

1.8K1 0

Bootstrap笔记

-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> ...-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> ...让低版本浏览器可以识别HTML5的新标签，如header、footer、section等 respond 让低版本浏览器可以支持CSS媒体查询功能基础CSS样式概要

3.4K9 0

第120天：移动端-Bootstrap基本使用方法

第三方依赖 jQuery——Bootstrap框架中的所有JS组件都依赖于jQuery实现 html5shiv——让低版本浏览器可以识别HTML5的新标签，如header、footer、section...--[if lt IE 9]--> <script src="lib/respond...此属性为移动端页面视口的设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1） width:视口的宽度 initial-scale:初始<em>化</em>缩放 user-scalable:是否允许用户自行缩放...--html5<em>shiv</em>让浏览器可以识别<em>HTML5</em>的新<em>标签</em>--> 10 11 12 13 <script src="lib

3.2K4 0

H5C3第五节

html5语义化兼容性问题我是header标签，我应该独占一整行解决方式: 在浏览器解析标签之前, 动态创建一下 header...: block; } 但是 html5 新增了很多语义化标签, 一个个创建太麻烦了, html5shiv 插件很好的解决这个问题 html5shiv解决兼容性问题在head中引入 html5shiv...插件包即可解决 IE 8 不识别 html5 语义化标签的问题但是在支持html5语义化标签的浏览器中, 这个js的执行就没有必要...[endif]--> html5 新增类名操作(熟记) 四个操作样式类的方法, 很简单, 需要熟记 1. 添加类: dom.classList.add 2.

6981 0

BootStrap的一个标准框架的内容解释——来源于bootstrap官网

IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入代码文件即可。...第二个表示让IE8支持媒体查询，即Media Queries。也是为了使IE6、7、8版本浏览器兼容css3样式--> ...--[if lt IE 9]> </script

1.1K5 0

BP3认识首页

对IE浏览器做了支持。对移动终端视口做了优化。现载入BP的css样式。最终载入BP和jquery的js文件。...-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> ...-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 --> </script

5971 0

HTML技术入门

在 HTML 中我们可以使用带 data- 前缀的属性来存储信息。...--[if lt IE 9]> 针对IE浏览器html5shiv 是比较好的解决方案。...html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。...html5shiv.js 引用代码必须放在元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

2.4K10 1

重构不完全教程集之一

——《开经偈》 html标签 HTML入门 HTML5 标签列表标签元素分类 ie8- 不支持html5新增标签，可通过引入js来实现：html5shiv 最后重置下html5标签的css默认样式： article, aside, details, figcaption, figure, footer, header, hgroup,...important > 行内样式 > id > 类/属性/伪类 > 元素/伪元素；权重相同的按照样式表中出现的顺序，后面的覆盖前面的深入解析CSS样式层叠权重值 CSS 选择器重置浏览器都有自己的默认样式...line-height的一些深入理解及应用 BFC MDN BFC，新建BFC的条件 Understanding Block Formatting Contexts in CSS，中文版理解CSS中的块级格式化上下文

1.4K5 0

从零开始学 Web 之移动Web（七）Bootstrap

Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。...-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries: 这两个文件的引入是为了支持IE8下面的...html5元素和媒体查询：因为在IE8下面默认不支持HTML5和媒体查询，所以需要引入两个插件--> <!...--html5shiv.min.js：为了在IE8下面支持HTML标签 respond.min.js：为了在IE8下面支持媒体查询--> <!...因为：如果在外层没有再包含container,那么嵌套列的宽度就是参参照当前所在的栅格；如果外层添加了container,那么参照就是核心样式文件所设置的容器宽度 <div class="container

5.6K3 0

重构不完全教程集之一

7383 0

WordPress主题修改之Html5语义化

刚才用Html5标签把主题给修改了一下，预览地址可以看这里：http://scorpio.sinaapp.com 不明白为什么在IE6下面会严重变形。...Html5的魅力 Html5最大的特点在于多媒体和移动互联网方面，小弟不才，对那些了解不多，本次修改仅仅是为了那么一点点语义化。...对已有主题进行Html5语义化升级对已有的WordPress主题进行Html5语义化标签还是很容易的。...--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5...前面三个，可以把和看成是更富语义化后的标签不过我对里面的搞不懂，不知道该什么时候用，找过搜索引擎，详细的案例解释几乎没有，里面通常包含

8280 0

HTML5特性&&canvas

4.HTML5支持：IE9以上，现代浏览器支持。 IE8，IE7，IE6可以通过document.createElement()进行创建新标签，然后添加标签默认样式。...这样就可以让它们支持HTML5新标签；(以下代码在IETester下的IE 8和IE6测试通过) 1 <!...（这是一种比较好的解决IE6-8不识别HTML5新元素方法，但是这些引入的新元素不能作为父元素包裹子元素；并且不能运用css样式╮(╯▽╰)╭，“万恶”的IE╮(╯▽╰)╭） 1 2 11 12 <!

9569 0

bootstrap笔记（一）——布局容器和排版样式

-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> Bootstrap 101 Template ...，bootstrap.css放在标签中。...常用样式 ? ? ? 在容器中设置样式，元素没有换行 ?

1K2 0

如何让bootstrap兼容ie8+

又翻出bootstrap官方API，细读之……这才明白由于bootstrap做响应式所用的栅格布局在ie8下不被支持，而且也不支持html5的新标签和css3的一些效果，如圆角、阴影、一些过渡效果等……...bootsrap已经对ie9渲染的很好了，亲测听说bootstrap2.0对ie8支持蛮好，不过没有用过。...[endif]--> 使用ie8测试，咦，好像并没有什么用，页面一点变化都没有！是了，如果你是用file://方式打开的，页面有变化才怪，来看一下bootstrap给出的解释看不懂？...这时就需要html5shiv出场了！...HTML5 Shiv 先附上github链接https://github.com/aFarkas/html5shiv 使用方法：这个没有respond.js那么麻烦，直接引入就好，再加上面的respond.js

1.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

IE没有样式化HTML5标签(带shiv)

相关·内容

腻子脚本 — HTML5Shiv

使用 HTML5 Shiv 让 IE 支持 HTML5

BootStarp模版

Bootstrap

HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

前端面试【HTML】— Canvas常用API有哪些，其兼容性如何解决？

常见的兼容性问题

Bootstrap笔记

第120天：移动端-Bootstrap基本使用方法

H5C3第五节

BootStrap的一个标准框架的内容解释——来源于bootstrap官网

BP3认识首页

HTML技术入门

重构不完全教程集之一

从零开始学 Web 之移动Web（七）Bootstrap

重构不完全教程集之一

WordPress主题修改之Html5语义化

HTML5特性&&canvas

bootstrap笔记（一）——布局容器和排版样式

如何让bootstrap兼容ie8+

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐