我正在构建一个在PC上使用的网络应用程序.为了防止与IE8或更高版本的浏览器出现兼容性问题,应该远离哪些HTML5标签?

注:大多数问题都是1-3岁的问题.

推荐答案

您问我应该远离哪些HTML5标签.

据我所知,HTML5中的一些标签是出于语义原因制作的.比如下面的例子.

<article> <section> <aside> <nav> <header> <footer> ..ect

这些几乎都很好用,只需要一点CSS就可以了.display: block;才能在大多数浏览器中正常工作,不过在较旧的浏览器中也是如此.Internet Explorer需要在Javascript中创建元素才能与之兼容.

Here is an example.

document.createElement('article');

<article>元素设置为在较旧的Internet Explorer中使用.

对于需要Javascript功能才能工作的更高级的HTML5标记,如下所示.

<audio> <video> <source> <track> <embed> And most importantly <canvas> 

这些元素在较旧的浏览器中较难支持/shiv.虽然我在底部包含了一个跨浏览器多边形填充的链接,但我没有亲自调查过它们.

所以我想说,任何不需要Javascript功能的元素都可以与少量跨浏览器支持代码一起使用.

If your targeting >IE8 then you should be fine if you use a shiv.

我该怎么称呼旧浏览器?< IE9

目前浏览器对HTML5标签的支持是.

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

低于8的Internet Explorer不支持,但可以这样修复.

CSS:

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

Javascript:

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

<audio> <video> <canvas>< IE 9中不受支持

The <embed> element has partial support in > IE8


You should also look into this tag.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

这个meta标记告诉Internet Explorer以可用的最高IE模式显示页面,而不是像IE7或8那样进入兼容模式并呈现页面.关于那Here个人的更多信息.


HTML5 Helper Links


要想开始,你可以go 100号房.

有关浏览器兼容性支持表,您可以查看-100

HTML5 SHIV-100

HTML5多边形填充列表-100

Update

正如在 comments 中提到的

小心元标签X-UA-Compatible.如果使用类似html5样板的东西,在元素周围有条件注释(html5 doctype IIRC也会出现这种情况),那么即使使用标签,IE9也可能会被迫进入IE7标准模式.我又来了

你也许想调查一下这件事,我目前没有任何证据支持这件事.

Html相关问答推荐

试图让三个Divs与下面的另外三个对齐

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

Angular 15 p-对话框不使用组件 Select 器呈现HTML

滚动两个不同高度的DIV;一个等待另一个

在每个列宽由带有固定值的minmax()函数定义的网格中,CSS如何为列分配空间?

为什么我得不到有错误的字段?迈克尔·哈特尔教程.7.3.3

高度:适合-内容不拉伸以适合内部长度

带下划线的文本应该有延长的下划线,以使其图像悬停

Tailwind CSS 忽略我的元素的填充

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单?

并排放置两个 div,同时 div2 环绕 div1

带标签 css 的 div 内的中心图标

::可点击图标之前

在选项标签中如何添加Django模板的条件

使用图像自定义 CSS 网格边框

从右到左支持百分号

右对齐 bootstrap 导航项而不是下拉菜单

我如何让这个动画播放,然后停止,然后在设定的时间后再次播放? (CSS)

如何将 img 元素定位到特定位置?

为什么 `html` 上的 overflow: hidden 将滚动框移动到正文?