html5中新增标签的兼容性如何如何解决,HTML5新标签的兼容性处理

普通浏览器

普通不支持HTML5新标签的浏览器 —— 能正常解析，但会当初成 inline 元素对待

在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用；经常会到初始化 css中看到：

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

IE9以下的浏览器

IE9 以下浏览器 —— 不能解析，即使想办解析了也会当成 inline 元素对待

但是在IE9版本以下(不含IE9)，并不能正常解析这些新标签，我们需要先想办法让浏览器能够正常解析后，再将其转化成块级元素 (block)。常见有两种方法

处理方式(一)

可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。再通过css将其转化成 block 元素

处理方式(二)

在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库html5shiv.js来解决兼容问题

主要是针对于ie低版本的，也就是只有低版本ie才执行才对，可以使用条件注释：

这里的respond.js是解决 ie低版本的CSS3媒体查询兼容性问题

还有一些常见的条件注释，也可以了解一下

如何处理HTML5新标签的兼容性问题

支持HTML5新标签: * IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签, 浏览器支持新标签后,还需要添 ...

HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容性问题？如何区分HTML和HTML5？

HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加. 绘画canvas: 用于媒介回放的video和audio元素: 本地离线存储localStorage长期存储数据 ...

如何处理HTML5新标签的浏览器兼容性问题？

① IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签 ② 也可以使用成熟的框架 ex:html5shim &l ...

HTML5新标签 w3c

w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...

HTML5新标签与特性---新表单+新属性----综合案例1

HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...

HTML5新标签和CSS伪类

HTML5提供了很多新的标签,由于HTML5的兼容性比较差,HTML5的标签常用于手机端

解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js，以及excanvas.js解决低版本IE不支持canvas的问题

插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...

让ie浏览器支持html5新标签的解决方法(使用html5shiv)

没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

随机推荐

Git进行代码管理的心得

git从网上下载安装后 直接可在开始菜单中找到 打开可以看到一个类似命令窗口的东西 用代码进行用户名和邮箱的设置 虽然不知道为什么但是教程叫我这么做 (ˇˍˇ) 然后似乎就可以用了 进入文件夹 输入对 ...

json文本装换为JSONArray

package com.beijxing.TestMain; import java.io.File; import java.io.IOException; import org.apache.co ...

DateTime to long

private static DateTime BaseTime = new DateTime(1970, 1, 1); 将unixtime转换为.NET的DateTime public static ...

基础的 Linux 网络命令，你值得拥有

导读 有抱负的 Linux 系统管理员和 Linux 狂热者必须知道的.最重要的.而且基础的 Linux 网络命令合集.在 It's FOSS 我们并非每天都谈论 Linux 的"命令行方面 ...

关于Oracle将小于1的数字to_char后丢掉0的解决办法

SQL代码如下: select rtrim(to_char(0.11, 'fm9990.99'), '.') from dual;其中0.11为需要to_char的数字fm去掉字符串前面的空格9990 ...

docker对cpu使用及在kubernetes中的应用

docker对CPU的使用 docker对于CPU的可配置的主要几个参数如下: --cpu-shares CPU shares (relative weight) --cpu-period Limit ...

Windows 下 docker 部署 gitlab ci

一.安装 1. 安装 docker Docker下载 注意:Windows 10 家庭版获取 之前的版本不能直接安装 Docker ,而是需要去安装 Docker Toolbox 我这里安装的是 Do ...

利用filter替换字符串中的空格

s = "abc def ghi xy" print(','.join(filter(lambda x: x, s.split(' '))))

分布式计算(四)Azkaban安装

Azkaban是一个批量工作流任务调度器,使用Java语言开发.用于在一个工作流内以一个特定的顺序运行一组工作和流程.Azkaban使用job配置文件建立任务之间的依赖关系,并提供一个易于使用的web ...