html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式


Posted in HTML / CSS onDecember 07, 2012

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

html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
为了是浏览器识别<mxria></mxria>标签并显示对应样式的效果,我们可以如下增加一段js,看到效果就不同了
复制代码
代码如下:

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

html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式 
现在大家明白了其中的奥妙吧!对,就是document.createElement ,HTML5 shiv就是这样一个js插件,将所有HTML5的标签进行了重新生成,你需要加载该插件,那么HTML5程序就能被所有浏览器识别了。
HTML / CSS 相关文章推荐
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 #HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 #HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 #HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 #HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 #HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 #HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 #HTML / CSS
You might like
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
php中session使用示例
2014/03/29 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
php集成开发环境详解
2019/09/24 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
利用python实现数据分析
2017/01/11 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
python处理csv中的空值方法
2018/06/22 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
本科生的职业生涯规划范文
2014/01/09 职场文书