低版本IE正常运行HTML5+CSS3网站的3种解决方案

2015-01-13  来源:本站原创  分类:经验交流  人气:3 

现在我们可以选择浏览器非常多,所以浏览器的环境也是种类繁多,同一个浏览器也是包含各种不同的版本,不同的版本之间的渲染方法也存在差异,它们支持的 HTML5、CSS3 特性恐怕也不尽相同。这种情况于是造成Web开发者在开发网站时,要面对数量庞大的浏览器种类

如果开发时按最低标准,比如IE6不支持的特性,我们统统不用,那就没有必要写这篇文章了;但我想这种情况极少,更多的开发,是在现代浏览器上使用它们支持的特性,而在早期浏览器上做一定的降级处理,这就是所谓 “渐进增强”,也是本文要说的重点。通过下面的方法,希望可以让网站也能够在低版本IE浏览器上奇迹般地运行得更好!
htmlshiv.js
Remy的 HTML5shiv通过JavaScript 来创建HTML5元素(如 main, header, footer等)。在某种程度上通过JavaScript 创建的元素是 styleable(可样式)的。我们可以花很多时间来思考其运行原理,但谁会在乎呢?这种策略在所有产品网站上仍然是必须使用的。

<!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/3.7/html5shiv.js"></script><![endif]-->

selectivizr.js
Selectivizr.js 是一个不可思议的资源,用于填充不支持的CSS选择器和属性,包括重要的 last-child。在最近的重设计中,我嵌入了 selectivizr,并在更老的 IE 浏览器上也不会错过任何细节。下面是我的实现代码:

复制代码 代码如下:

<!--[if lte IE 8]><script src="http://cdn.bootcss.com/selectivizr/1.0.2/selectivizr.js"></script><![endif]-->

现代项目绝对必须的。只在老版本IE时才加载。
另外,Modernizr 脚本中已经添加 HTML5 浏览器支持脚本 html5shiv,我们只要引用 Moernizr.js 文件,IE9 以下的 IE 浏览器就支持 HTML5 添加的语义标签如 nav、section、article 等,也可以使用 CSS 对它们进行样式化。
条件注释
下面这样最土的情况你肯定看到过。但无论丑陋与否,事实上这段代码完全按预期的方式运行:

复制代码 代码如下:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

上面的方法是作用于css,来写一些针对IE各版本的样式差异。先判断用户用的哪个IE版本,然后在标签上加上该版本的class,这样可以方便hack。

然后我们在css文件中就可以这样写:

复制代码 代码如下:

.ie6 xxx {};
.ie7 xxx {};

这是目前小编认为效率最高的方法,这个方法不需要或等待JavaScript,而且也不需要重量级的JavaScript库。你定义的styles类立即生效,还没有闪屏。

尽管IE浏览器正在迎头赶上竞争对手,新版本IE也有非常大的变化,并希望借助全新的IE重塑网络体验。但在国内旧版IE仍然是比较流行。好消息是,这些资源在所有现代浏览器上运行良好,代价也并不高!

相关文章
  • 低版本IE正常运行HTML5+CSS3网站的3种解决方案 2015-01-13

    现在我们可以选择浏览器非常多,所以浏览器的环境也是种类繁多,同一个浏览器也是包含各种不同的版本,不同的版本之间的渲染方法也存在差异,它们支持的 HTML5.CSS3 特性恐怕也不尽相同.这种情况于是造成Web开发者在开发网站时,要面对数量庞大的浏览器种类 如果开发时按最低标准,比如IE6不支持的特性,我们统统不用,那就没有必要写这篇文章了:但我想这种情况极少,更多的开发,是在现代浏览器上使用它们支持的特性,而在早期浏览器上做一定的降级处理,这就是所谓 "渐进增强",也是本文要说的重点.

  • 40款非常漂亮的 HTML5 & CSS3 网站模板免费下载欣赏 2012-03-09

    HTML5 作为下一代网页语言,加入中众多更具语义的标签,例如video.audio.section.article.header 和 nav 等.而 CSS3 作为 CSS 的下一代版本,同样引入了很多很酷的属性,以前很多需要 JavaScript 才能实现的复杂效果,现在使用 CSS3 就能非常简单的实现.CSS3 和 HTML5都是现在Web开发领域的技术热点,它们给 Web 开发带来了革命性的影响. 相信你和我一样很好奇结合 HTML5 和 CSS3 来制作网站会有什么样的效果,下面向大

  • HTML5, CSS3, SVG兼容性检测网站 2014-01-14

    http://caniuse.com/#feat=fileapi Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

  • HTML5+CSS3实现图片旋转 2014-10-09

    实现HTML图片旋转,HTML5+CSS3实现图片旋转效果,图片任意角度旋转只支持IE9及以上浏览器,支持谷歌.火狐.safari浏览器.只要支持HTML5的浏览器就能支持本html旋转图片效果. 图片旋转效果截图 原始图片与旋转后图片截图 旋转图片效果截图 完整HTML代码如下: <!DOCTYPE HTML> <html> <head> <title>HTML5+CSS3实现图片旋转</title> <script type="

  • 浏览器html5/css3兼容性检测的javascript类库 - Modernizr简单介绍 2012-04-17

    日期:2012-4-17 来源:GBin1.com 在线演示 本地下载 大家是不是在开发设计过程中遇到如下情况?某些浏览器不支持HTML5或者CSS3的某些标签和属性.而我们希望开发的网站或者web应用能在所有的浏览器中运行正确,针对不支持的浏览器我们可以提供其它fallback方式来弥补. 今天这篇文章呢,我们将介绍一个开发利器 - Modernizer,Modernizer是一个Javascript的类库API,对于大部分的前端开发人员来说,使用它是一件非常简单的事情.相信大家会非常喜欢这个

  • 响应式HTML5/CSS3的框架 ResponsiveAeon 2012-08-23

    ResponsiveAeon 网站 : http://newaeonweb.com.br/responsiveaeon/ ResponsiveAeon 是一个HTML5/CSS3的框架,可以非常快速的创建响应的布局.它有一个网格系统是基于总1104px宽度12列,提供了3个非常容易理解的基本类供使用.该框架使使用@mediaqueries的,支持任何尺寸的设备.除了网格系统,也有排版,列表,表格,按钮和表格的样式. 授权协议: GPLv3 开发语言: JavaScript HTML/CSS 操作

  • 兼容低版本IE的JScript5.5实现 2013-11-21

    作者Blog:www.coolcode.cn IE 5.5 中的 JScript 版本是 5.5 版,它比以前版本的 JScript 中多了如数组的 push.pop.shift.unshift 方法和 encodeURI.decodeURI 等一些重要的函数.而这些增加的内容在目前其他浏览器(如 Moziila/Firefox 和 Opera)上也同样支持.因此目前开发网站一般对于 IE 浏览器只能兼容到 5.5 版,而对于更低版本的 IE(如 IE 5.IE 4 等),则不再去考虑了.虽然这

  • 13个有用的HTML5.CSS3和jQuery搜索表单教程 2014-04-15

    概述:还在为没有一个超赞的网站搜索框而烦恼吗?那还不赶紧来看小编为各位搜集的13个有用的搜索表单教程!一起看起来吧! 添加搜素框或网站搜索功能是为了方便用户能够轻松.快捷地找到自己需要的信息.因此,在网站中添加一个搜索框已经成为网页设计的主流元素之一.添加一个搜索框到网站会使得用户界面更加友好,也能帮助用户轻松愉快地浏览. 下面,小编收集了13个有用的CSS3,HTML5和jQuery搜索表单脚本来帮助大家从头开始创建一个搜索框.希望能够帮助到大家,让我们一起来看看吧! 脉动的CSS3输入搜索框

  • 2014 HTML5/CSS3热门动画特效TOP10 2014-05-17

    本文给大家总结了10款本站今年比较热门的html5/css3的动画特效,附上演示地址和下载地址,有需要的小伙伴对比着使用. 1.HTML5+CSS3实现的模拟真人奔跑动画特效 今天要分享一款很酷的模拟真人奔跑动画,它主要是利用HTML5/CSS3技术结合多张图片的切换来实现的.这款HTML5动画的逼真之处在于人物在奔跑的时候很有节奏感,而且有人物的投影.更重要的是当人物跑的越来越近是,人物的大小也会随之变大.很像一个小男孩从远处跑过来. 在线演示 源码下载 2.jQuery实现的四款支持不同自定

  • 分享最新20个漂亮的支持HTML5的网站 2013-10-10

    作为下一代网页语言,HTML5 拥有很多让人期待已久的新特性,越来越多的网站开始支持HTML5,实现更加精美的效果.希望下面推荐的这些支持HTML5的网站实例能帮助大家更好的学习 HTML5 网站制作. Sylvain Ollier viniltec Superkoderi Netlash-bSeen 360langstrasse.sf.tv Art & Graft Rivers & Robots Jolena Million Tree Challenge Kitchen Sink Stu

  • 全面改用HTML5+CSS3来架构 2011-02-13

    接下来的几大网站不再用无数的div和css2来架构,全面改用HTML5+CSS3来架构,减少的不止是代码量,还有更宝贵的是团队的时间成本. 推荐:让我们寻找最优秀的Blogger!

  • HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性 2013-02-04

    日期:2013-2-4 来源:GBin1.com 不管你以前在web页面布局中如何称呼它们 - "区域"还是"块",我们一直都在布局中将页面分成可视的不同区域.但真正的问题在于我们并没有使用任何正确的工具来实现.一般情况下我们使用典型的网格来划分页头,页面主题,页尾等等区域来实现所谓的页面布局. 在过去的很多年以来,我们都使用DIV来帮助我们划分页面区域,而为此我们定义了很多class来帮助我们有效定义页面上的每一个层次,最新的HTML5最终帮助我们解决了这个问题

  • 利用excanvas.js让低版本IE(6,7,8)支持canvas 2013-12-05

    最近在使用jqplot(web图表),高级浏览器使用的是html5的canvas,但对于低版本IE6,7,8,则使用excanvas.js来模拟canvas. 因为ie低版本支持VML,详情参见 IE支持的VML简介

  • HTML5 / CSS3 Transform / Animation 示例页面 2014-03-11

    <!DOCTYPE HTML> <html> <head> <!--先声明好charset以免错误解析title的中文或其他字符--> <meta charset="utf-8"> <title>Tommy's 3D page.</title> <!--针对手机的标签,用于设定页面显示大小.比例和禁用用户缩放页面--> <meta content="width=device-

  • Agile国人出品HTML5+CSS3+JS移动应用开发框架 2015-05-08

    Agile 是一个基于HTML5+CSS3+JS的移动应用开发框架,在体验上尽量接近Native Like,并且同时支持单页模式和多页模式. Agile 让HTML5在移动应用开发中充分发挥优势.所有开发者都能快速上手.所有设备都可以适配.所有项目都适用. 简单.可扩展 Agile 支持Zepto和jQuery双引擎及相应的扩展:同时Agile均支持单页模式和多页模式的移动应用,可以与ExMobi.PhoneGap等流行的跨平台开发框架一起使用. 一个框架.多种设备 你的移动应用能在 Agile

  • Upcoming Events: Zibin lectures introduce HTML5 & CSS3 2010-07-30

    Theme: HTML5 & CSS3 Lecture: Zibin (Opera Web Evangelist) Time :2010-08-07 13:00 - 16:00 Location: Shanghai Pudong Zhangjiang Hua Road, Building 68, No. 8 7 months ago Zibin held in Beijing, the WebRebuild activities talked about this subject, this t

  • HTML5 + CSS3 first work 2010-12-11

    The company is currently doing a project management background, as is the use of internal staff, so I decided to use the latest technology to HTML5 + CSS3 implementation. Made a DEMO Here we can access http://www.websiteui.com/css3/draft.html With th

  • 低版本中Python除法运算小技巧 2014-05-03

    这篇文章主要介绍了低版本中Python除法运算小技巧,python 2.5版本中存在两种除法运算,即所谓的true除法和floor除法,本文讲解了两种方法的使用技巧,需要的朋友可以参考下 首先要说的是python中的除法运算,在python 2.5版本中存在两种除法运算,即所谓的true除法和floor除法.当使用x/y形式进行除法运算时,如果x和y都是整形,那么运算的会对结果进行截取,取运算的整数部分,比如2/3的运算结果是0:如果x和y中有一个是浮点数,那么会进行所谓的true除法,比如2.

  • 让低版本浏览器支持input的placeholder属性(js方法) 2014-06-07

    低版本浏览器一般都不会支持input的placeholder属性,接下来使用js实现下,感兴趣的朋友可以参考下哈 var doc = window.document, input = doc.createElement('input'); if( typeof input['placeholder'] == 'undefined' ) // 如果不支持placeholder属性 { $('input').each(function( ele ) { var me = $(this); var p

  • 完美解决IE低版本不支持call与apply的问题 2014-07-12

    这篇文章主要是对解决IE低版本不支持call与apply的问题进行了详细的介绍.需要的朋友可以过来参考下,希望对大家有所帮助 Function.prototype的apply和call是在1999年发布的ECMA262 Edition3中才加入的(1998年发布ECMA262 Edition2).在此前的的浏览器如IE5.01(JScript 5.0)中是没有apply和call的.因此会带来一些兼容性问题,以下是修复方式: if(!Function.prototype.apply){ Func