如今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
												


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

    
								
  1. HTML5网页如何让所有的浏览器都能识别语义元素标签样式
		
    浏览器对语义元素的支持情况 如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未 ...
    
		
    2. 
						
  2. 在IE6/7/8下识别html5标签
		
    识别html5标签: html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article>< ...
    
		
    3. 
						
  3. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    4. 
						
  4. 为什么每个浏览器都有Mozilla字样？
		
    你是否好奇标识浏览器身份的)”,于是IE可以收到含有框架的页面了,所有微软的人都嗨皮了,但是网站管理员开始晕了. 因为微软将IE和Windows捆绑销售,并且把IE做得比Netscape更好,于是第一 ...
    
		
    5. 
						
  5. 解决：Eclipse导入工程后全是错误，连基本类型都不识别
		
    当初在大学没时间完成作业时,总是喜欢网上搜一个或者拷贝同学的一个工程过来,导入到Eclipse中却全是红叉,连基本类型都不识别. 当时就纳闷了,难道是天要亡我之心不死?后来慢慢了解了,其实是导入的工程 ...
    
		
    6. 
						
  6. 为什么每个浏览器都有Mozilla
		
    你是否好奇标识浏览器身份的User-Agent,为什么每个浏览器都有Mozilla字样? Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36  ...
    
		
    7. 
						
  7. 每次用 selenium 操作浏览器都还原了 (比如没有浏览器历史记录)
		
    每次用 selenium 操作浏览器都还原了 (比如没有浏览器历史记录)
    
		
    8. 
						
  8. FormData上传文件(不是所有的浏览器都支持)
		
    <h1>Ajax上传文件</h1> <div> <input type="file" id="img"/> &l ...
    
		
    9. 
						
  9. 苹果的浏览器safari无法识别 2016-1-1这样的日期，会返回Invalid Date
		
    1.很多时候我们遇到的日期是2016-1-1这样的,中间是带横线的,但是有时候我们需要转化为标准的时间,即使用new Date(time)这样的方法,这时在safari浏览器里面Invalid Dat ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ASP.NET WEBAPI 的身份验证和授权
			
    定义 身份验证(Authentication):确定用户是谁. 授权(Authorization):确定用户能做什么,不能做什么. 身份验证 WebApi 假定身份验证发生在宿主程序称中.对于 web ...
    
			
    2. 
						
  2. e.target.files[0]层层剖析
			
    因为我现在拿到的一个功能是上传时过滤掉很大尺寸的图片,所以需要来拿到上传时选择图片的size,所以有了这篇博文 不多说 上代码 $('input').change(function(e){ 1️⃣.c ...
    
			
    3. 
						
  3. CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）
			
    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...
    
			
    4. 
						
  4. webpack继续
			
    序言:继续上一篇<webpack初入> 1.上一篇配置完成后最终的命令是:webpack,如果更改package.json中的一个配置如下: 换为 此时最终的命令:npm start等同于 ...
    
			
    5. 
						
  5. vs2012使用64位IIS EXPRESS调试
			
    使用Visual Studio 2012开发网站或web应用程序时,可以使用两种web server.自带的development server和IIS EXPRESS.development ser ...
    
			
    6. 
						
  6. 火狐下多个span连在一起和换行写存在差异
			
    当父元素的宽度确定,多个span换行写,span加起来占的宽度比预设的大
    
			
    7. 
						
  7. Html + Css思维导图
			
    最近整理的一份Html和Css的思维导图,共享给初学者使用. 各个知识点的详细案例介绍,后期会分阶段依次发布,希望对大家学习html和css有帮助. 如果对文中的知识点有异议,欢迎随时拍砖! 后期也回 ...
    
			
    8. 
						
  8. 关于安卓APP的启动界面
			
    刚学安卓App开发的朋友们,可能会遇到一个问题,就是人家的App刚进入会有一个页面出现一会儿后消失,   这个页面可以用来打广告,也可以声明App的主题,所以说这个启动页面至关重要,接下来,我把我的代 ...
    
			
    9. 
						
  9. The operation couldn’t be completed. (LaunchServicesError error 0.)
			
    问题描述: 当运行Xcode时,编译代码成功,但是登陆模拟器失败,显示错误:The Operation couldn't be completed.(LaunchServicesError error ...
    
			
    10. 
						
  10. 第一课 ionic 日志输出
			
    写程序的首要问题就是要打印日志,因为只有将日志输出才能真正了解程序的运行状态. 日志输出有两种方式 1.console输出 console.log("测试一下") console. ...
    
			
    11.