如何正确使用 HTML5 新标签以与旧版浏览器兼容


How to properly use HTML5 new tags to be compatible with older browsers

在输出HTML表单的PHP文件中,我想知道我是否可以使用新的HTML5标签,例如电子邮件输入类型。最旧的浏览器会显示一些错误,还是我应该以某种方式区分 PHP,例如通过 USER_AGENT 并渲染:

<input type="text" /> 

而不是

<input type="email" />

在旧浏览器中(顺便说一句,我猜同样的问题也适用于DOCTYPE本身)。根据规格,哪个最合适?

对我们来说幸运的是,存在一种解决方法,允许旧浏览器识别这些新元素,从而可以对它们进行样式设置,从而让我们充分利用这些新的语义标签。这是一个叫做HTML5Shiv的工具。如链接的Google页面上所述,在这种情况下,"shiv"和"shim"是可互换的术语。但是,我们是如何从IE甚至不承认这个元素的存在,到现在能够使用它的呢?诀窍是调用document.createElement("section")会突然导致IE识别section元素。没有人知道为什么,但它有效,你甚至不需要使用该函数返回的节点。但是您需要确保在使用任何这些元素之前尽早在您的网站中调用它,否则它将不起作用。您需要为每个新的 HTML5 元素调用它,如以下代码所示:

"abbr article aside audio bdi canvas data datalist details figcaption figure "+ "footer header hgroup main mark meter nav output progress section " + "summary template time video" .replace(/w+/g, function(a){ document.createElement(a) });

请注意,我们使用字符串对象的 replace 方法来简洁地迭代与正则表达式匹配的每个连续长度的字符,并为每个字符块执行回调函数,进而调用 createElement。在这里,我们将此方法称为"抖动文档",以便文档可以呈现新的HTML5元素。

最好使用

较新版本的浏览器,除非您使用旧浏览器重新获得某些内容! :D

谢谢你!

如果有一个库可以帮助您在旧浏览器上使用"新标签" HTML5 Shiv