不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2515 如果我们不做什么手脚的话,IE6~IE8浏览器不支持HTML5元素, <nav>, <header>, <footer>, <article> … 然而,前篇Google前端规范HTML部分中提到:要使用语义的HTML5元素作为text/html, 考虑到Google不可能把…

html5备忘录——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1544 一.前言兼图片备忘下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片(已大小优化,因为图片较高,故滚动显示). 但是,上面毕竟是图片格式(原图上兆),而且还是英文的,所以自己觉得有必要将上面的内容文字化,同时做下简单的中文翻译.整理一番,于是就有下面的些内容.…

让更多浏览器支持html5元素的简单方法

当我们试图使用web上的新技术的时候,旧式浏览器总是我们心中不可磨灭的痛!事实上,所有浏览器都有或多或少的问题,现在还没有浏览器能够完整的识别和支持最新的html5结构元素.但是不用担心,你依然可以在最小化不可用造成的影响的基础上使它们跨浏览器工作.之前大前端介绍过这样的方法:HTML5 Shiv – 让该死的IE系列支持HTML5吧. 如果你向一个页面中添加一个浏览器无法识别的元素,默认情况下浏览器会把它当做一个<span>标签对待(ie会当成一个匿名的内联元素处理).这篇文章中提到的htm…

如何让低版本IE浏览器支持HTML5标签并为其设置样式

现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是块级元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block: header, section, footer, aside, nav, main, article, figure { display: block; } 然而低版本IE浏览器并不支持这些HTML5元素,如: <style> header{ display: block; bac…

html5.js让IE（包含IE6）支持HTML5元素方法

原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法微软的最新浏览器IE8及下面IE版本号对HTML5标签的支持是有限的,我们能够通过在网页中加入脚本的方式来解决眼下IE浏览器对HTML5支持的问题. 让IE(包含IE6)支持HTML5元素.我们须要在HTML头部加入下面JavaScript,这是一个简单的document.createElement_x声明,利用条件凝视针…

html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。

html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素. 各版本html5shiv.js CDN网址:https://www.bootcdn.cn/html5shiv/…

让ie浏览器支持html5新标签的解决方法(使用html5shiv)

没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是: IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下: document.createElement(‘新标签’); / /新增创建新标签方式一:Coding…

jquery实现上传图片预览(需要浏览器支持html5)

jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m…

如何让旧浏览器支持HTML5新标签

HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML5标签.自己最近在写响应式布局的例子的时候也使用了header等标签.还是希望可以兼容低版本的浏览器,再次和大家分享一下,如何让旧浏览器支持HTML5新增标签. <!DOCTYPE html> <html lang="en"> <head> <me…

让旧浏览器支持HTML5新增标签

首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素. 对于代码位置,我们需要注意,要将script标签放到head中,而不是body后面,这是因为,浏览器从上到下进行代码的执行和解析,在已经渲染之后在执行JS就没有任何价值和意义. 代码如下: <!DOCTYPE html> <html lang="en"> <…

IT兄弟连 HTML5教程设置IE9以下版本浏览器支持HTML5

HTML2.HTML5刚发布时由于各浏览器之间的标准不统一,开发者的时间都浪费在解决Web浏览器之间的兼容性上.但由于W3C和WHATWG对HTML5新版本的制定,以及近年来对HTML5的使用,再加上各大浏览器鼎力支持,已经有非常丰富的兼容性解决方案,多数应用HTML5在老版本的浏览器上也可以正常运行,正是因为保障了兼容性才能让人毫不犹豫的用HTML5开发网站.HTML5内部并没有封装什么很复杂的.不切实际的功能,而是封装了简单实用的功能,HTML5内部功能不是革命性的而是发展性的,并不代表HT…

【学习】jquery.placeholder.js让IE浏览器支持html5的placeholder

type为text或password的input,其在实际应用时,往往有一个占位符,类似这样的: 在没有html5前,一般写成value,用js实现交互,文本框获得焦点时,提示文字消失,失去焦点时,文字又出现,这样体验很好,而且也不用在文本框前面放上功能字样的文字了,节省空间.贴一段jquery代码好了: $(":input").focus(function(){//默认文字消失 if($(this).val()==this.defaultValue){ $(this).val(&qu…

图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=804 一.写此插件的缘由在现在的web应用中,对上传的图片,例如头像,原始的摄影照片常常需要在web页面上进行一些处理,常见的处理就是剪裁与旋转. 对于剪裁,我之前曾翻译过一个jQuery插件,JCrop插件,…

[转] HTML5终极备忘大全（图片版+文字版）---张鑫旭

[转] 翻译-高质量JavaScript代码书写基本要点 ---张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:Stoyan Stefanov原文链接:The Essentials of Writing High Quality JavaScript翻译编辑:张鑫旭 //zxx: 俗不可耐的开场白就免了,直接进入翻译内容(其实是因为本文是在太..太..长了,). 教程相关细节主题:JavaScript最佳实践难度…

HTML5 number类型文本框step属性的验证机制——张鑫旭

我在下一盘很大的棋,本文只是其中的一个棋子. 需要提前知道的: 目前而言,对step雄起的浏览器为IE10+, Chrome以及Opera浏览器. 需要预先知道number类型input的一些基本知识. HTML5 step的验证机制可以应用在不支持的浏览器上. 问题引导,威逼利诱如下一小段含step属性的HTML代码: <input type="number" step="2.1" min="1" /> 在Chrome浏览器下长相…

HTML5扩展之微数据与丰富网页摘要——张鑫旭

一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使用<h1>标签包裹页面标题信息就是为了让机器识别(搜索引擎 – SEO). 而微数据是什么呢?在我看来,微数据也是为了方便机器识别而产生的东西.其有特定的规范,有特定的格式.可以丰富搜索引擎的网页摘要. 先来看看比较官方的解释:HTML5 微数据规范是一种标记内容以描述特定类型的信息,例如评论.人…

说说HTML5中label标签的可访问性问题——张鑫旭

一.开篇叨叨一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的. 我们看看点评网的注册页面那个同意条款的复选框,非要点在复选框上才能选中: 查看HTML发现复选框id和label标签的for属性值都是空,不解~~ 像其他网站的登录或是注册处的控件的点击区域就做得蛮不错的,像是豆瓣网, 新浪微博等: 我们一般有两种方法来优雅地扩…

HTML5新增的form属性简介——张鑫旭

一.引言 HTML5中新增了一个名为form的属性,是一个与处理表单相关的元素. 在HTML4或XHTML中,我们要提交一个表单,必须把相关的控件元素都放在<form>元素下.因为表单提交的时候,会直接忽略不是其子元素的控件.但是,实际情况下,由于页面设计与实现的特殊性,会存在有些表单之外的元素也需要一并提交的情况,这时候,传统的表单功能就显得有些捉襟见肘了. HTML5中新增form属性就是为更好地处理这个问题才出现的.其作用,个人感觉,有点类似于label标签的for属性. 二.更好的实现…

完善：HTML5表单新特征简介与举例——张鑫旭

一.前言一撇其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦,关键是TouTuBe视频,需要越狱观看.得,像我这样安分守已的良民,除了看空姐,其他情况都是懒得***的,所以这部分视频展示的内容,其实就是个“空”. 所以,这里打个补丁,把这部分内容完善下.本文的大致内容有:# <input type=”number” /># <input type=”…

html5shiv.js-让IE浏览器支持HTML5标准

兼容性IE8及以下IE版本浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题. <!–[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <[endif]–> 当然你可以在下面给的地址中下载好``压缩文件,放到本地调用. 注意区分支持h5,…

低版本浏览器支持HTML5标签的方法

最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引入js包  注:js包(html5.js)内容: // html5shiv MIT @rem remysharp…

老式浏览器支持html5和css3

在IE页面的head标签里面加入 <!-[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-> 让IE浏览器支持css3的方法 .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safa…

如何让老式浏览器支持html5新增的语义元素

html5新增加了一些语义元素,如header, footer, nav, aritcle, aside,等等. 然而,有些老款浏览器无法识别这些元素,会把它们当成 inline 元素对待,这会导致一些相当严重的样式问题. 解决办法:把这些语义元素全部声明为块级(block)元素 header,footer,nav,article,aside,section{ display:block; } 如果要兼容 ie9 之前的 ie 版本,还需要在文档中添加一点 javascript: docume…

老式浏览器支持html5与css3

html5低版本浏览器兼容方式  最后在css代码中插入: article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block} css3 低版本浏览…

让所有浏览器支持HTML5 video视频标签

HTML5究竟需要多少种视频编码格式当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件如何把其他格式的视频转换成H.264编码的MP4视频一个MP4格式或非MP4格式的视频文件,如rmvb.avi.mkv.flv 都可以,这里用:MP4格式的第三方软件:格式…

让IE浏览器支持HTML5

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>html5标签</title> <style> .head{background: red;} .footer{background: blue;} </style> </head> <body> <he…

让IE系列浏览器支持HTML5（share）

引用Google的html5.js文件  将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效) 最后在css里面加上这段: /*html5*/ article,aside,d…

添加shiv让所有现代浏览器都支持 HTML5 语义元素 html5.js让IE（包括IE6）支持HTML5元素方法

引用Google的html5.js文件  将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效) 当然,你也可以把代码拿出来自己看着办:html5.js /* HTML5 Sh…

PC-CSS-多浏览器支持HTML5

非IE:article, section, aside, hgroup, nav, header, footer, figure, figcaption {display: block;}IE:<script>document.createElement(‘article’);document.createElement(‘section’);document.createElement(‘aside’);document.createElement(‘hgroup’);document.cr…

【不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭】的更多相关文章