让所有的浏览器都能识别HTML5标签样式的小插件

如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未来很长一段时间,HTML5的开发者将必须考虑向下兼容的问题。HTML5的标签或CSS选择器兼容性的做法有很多,其中自己生成标签元素就是一种。

基本原理参见如下代码在IE8中效果,样式根本没有起作用。

<html><head><style>mxria{ color: red; }</style></head><body><mxria>Hello!</mxria></body></html>


为了是浏览器识别<mxria></mxria>标签并显示对应样式的效果,我们可以如下增加一段js,看到效果就不同了

<html><head><style> mxria{ color: red; }</style><script>document.createElement("mxria")</script>
</head><body><mxria>Hello!mxria.com</mxria></body></html>


现在大家明白了其中的奥妙吧!对,就是document.createElement ,HTML5 shiv就是这样一个js插件,将所有HTML5的标签进行了重新生成,你需要加载该插件,那么HTML5程序就能被所有浏览器识别了。


下载地址:http://html5shim.googlecode.com/svn/trunk/html5.js

时间: 2024-08-08 13:24:58

让所有的浏览器都能识别HTML5标签样式的小插件的相关文章

老式浏览器(IE6,IE7,IE8)识别html5标签

近几年HTML5风潮大起,HTML5新增的一些语义化标签,更是让前端兄贵们欢欣鼓舞. HTML5新增的标签<header>,<footer>,<nav>,<hgroup>,<article>,<section>,<aside>,<audio>,<vedio>,<canvas>...and so on.就不在此一一列举了. 但是像IE6,IE7,IE8这些又老又旧渲染效果又丑,让前端兄贵们

在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

除了IE浏览器,其他浏览器都联不上网怎么办~转载百度经验

百度师傅最快的到家服务,最优质的电脑清灰 百度经验:jingyan.baidu.com 有个网友遇到一个非常奇怪的上网问题,刚才始,发现QQ不能登录,后来接着发现火狐浏览器也打不开网页,刚开始,以为只是网络问题,便重启了电脑与路由器等网络设备,还不行,于是用其它电脑连接网络,却发现可以上网,所有浏览器都可以用,所以肯定是自已电脑问题,再试了其它很多浏览器,发现只有IE浏览器可以用,其它十几种浏览器都上不了网,于是上网求助. 象这样的问题,主要是原因是设置了代理,DNS缓存出现错误,或者是没有启动

jsWindow 对象 Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。 注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。 Window 对象集合 集合 描述 frames[] 返回窗口中所有命

一.JSX简介 JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析. 如下(JS写法) var child1 = React.createElement('li', null, 'First Text Content'); var child2 = React.createElement('li', null, 'Second Text Content'); var

div里面整齐的字体样式,所有浏览器都兼容

<div id="wenda"> <div class="table_wd" > <div class="tr1"> <div class="td1"> <h3 class="title">商标注册需要准备什么资料?</h2> <p><strong>如果以公司名义申请商标,需要准备企业法人<br/>营

为什么每个浏览器都有Mozilla

你是否好奇标识浏览器身份的User-Agent,为什么每个浏览器都有Mozilla字样? Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.94 Safari/537.36 Mozilla/5.0 (Linux; U; Android 4.1.2; zh-tw; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, l

为什么每个浏览器都有Mozilla字样

你是否好奇标识浏览器身份的User-Agent,为什么每个浏览器都有Mozilla字样?Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.94 Safari/537.36Mozilla/5.0 (Linux; U; Android 4.1.2; zh-tw; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, lik

为什么每个浏览器都有Mozilla字样(转载于知乎shadow)

作者写的很有意思拿出来和大家分享 作者:Shadow链接:https://www.zhihu.com/question/19553117/answer/114306637来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 你是否好奇标识浏览器身份的User-Agent,为什么每个浏览器都有Mozilla字样?Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome

前端工程师都用哪些靠谱的小工具?

前端工程师都用哪些靠谱的小工具? 转载自 作者 杜Amy 现在市场上可用的前端开发工具实在是数不胜数,令人眼花缭乱,作为一个已入坑的前端开发工程师,再此分享一下自己用过的一些工具库. 前端小工具 说到开发工具,肯定是少不了编辑器: SublimeText SublimeText SublimeText 这个工具很火,关键在于它的小巧.简洁.快枪手,长长的文本打开速度也是杠杠的.具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等.还可自定义键绑定,菜单和工具栏.是一个跨平