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

标签: IE Web CSS3 HTML5 | 发表时间:2014-02-20 22:47 | 作者:iefans
出处:http://www.iefans.net

现在我们可以选择浏览器非常多,所以浏览器的环境也是种类繁多,同一个浏览器也是包含各种不同的版本,不同的版本之间的渲染方法也存在差异,,它们支持的 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仍然是比较流行。好消息是,这些资源在所有现代浏览器上运行良好,代价也并不高!

This article addresses: http://www.iefans.net/dibanben-ie-yunxing-html5-css3-wangzhan/

Here is no comments yet by the time your rss reader get this, Do you want to be the first commentor? Hurry up

相关 [版本 ie 正常] 推荐:

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

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

IE各个版本的调试工具

- - CSDN博客互联网推荐文章
最近使用JQuery开发的网页在IE6浏览器下出现样式不对,VS2010调试的时候有些不便. 无意之中看到由微软开发的 modern.ie,继而发现 BrowserStack,发现有很多的IE调试工具,就用微软开发的那款吧. Expression Web SuperPreview 4.0软件简介.

绝对不能在低版本IE浏览器兼容性问题上妥协

- - IE浏览器中文网站
网站开发者需要花费大把时间精力来兼容 IE6/ IE7的时代已经过去了,目前的现状是低版本IE浏览器正在逐渐消失,根据 12月份最新的浏览器市场份额统计数据显示,在全球范围内IE6和IE7加在一起仅有6.5%. 虽然在国内IE6和IE7仍然有相当一部分的占有率(20%左右),还有数字浏览器给他撑腰,但还是逃离不了被抛弃的命运.

破碎的IE:全版本远程代码执行0day披露CVE-2014-1776

- - FreeBuf.COM
微软今天公布了安全公告2963983,它不但涉及6/7/8/9版,还影响最新的IE10/11浏览器,这两个版本的浏览器被查出一种可以远程执行代码的漏洞,如果用户访问到特别设计过的恶意网站,就会遭到类似处理电子邮件链接的攻击,不过目前为止这一漏洞并未广泛传播,仅仅有几例有针对性的攻击. 此前,信息安全公司FireEye曝光了这一漏洞,并表示黑客已利用这一漏洞去攻击某些美国公司.

IE 16岁了

- yuguichun123 - cnBeta.COM
Firefox 6正式版的发布引来了诸多关注,但悄无声息之中,Internet Explorer迎来了自己的16周岁生日――Mozilla,你才应该是送蛋糕的那个. 1995年8月16日(美国当地时间),微软发布了第一个版本的Internet Explorer. 其实,IE并不是微软完全自主开发的产品,而是花了200万美元购买Spyglass Mosaic浏览器的授权,然后修改而来.

灵格斯词霸(Lingoes) v2.8:支持所有版本IE/Chrome/Firefox取词,词典导入导出

- han - 善用佳软
灵格斯词霸(Lingoes) v2.8(2011-09-16) 更新(下载):. 支持 Firefox 所有版本屏幕取词. 支持 Google Chrome 所有版本屏幕取词. 支持 360 安全/极速浏览器屏幕取词. 提供词典导入导出功能, 方便备份和在多台电脑上迁移词典. 令我敬佩的更新:《说文解字》词典.

【转】 CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

- - Web前端 - ITeye博客
CSS3的透明度属性opacity想必大家都已经用的无处不在了. 而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,这个估计谁都会写,但是涉及到filter的具体语法含义和各版本写法的不同区别,很多人都搞不准确,我曾经问过许多群里的大牛,说的都不是很准确,网上的说法就更五花八门了.

IE 浏览器的创新

- - 博客 - 伯乐在线
译者按:IE 曾是 web 创新的先驱,但最近几年因为对 web 标准的支持落后于其他 浏览器以及低版本 IE 的各种 bug 而被人诟病. Zakas 带我们回顾了 IE 在 web 发展过程中扮演的辉煌角色,让我们能以一个更客观的眼光来看待 IE. 看完这篇文章,也许大家都会对 IE 浏览器有一定的改观,这也是我翻译这篇文章的目的.

奇怪的 IE Cookie 设置

- - IE浏览器中文网站
今天接到一个奇怪的问题,所有的浏览器都可以正常执行,唯独在 IE10 浏览器下运行会有问题,花了一些时间找问题到底是什么,这篇记录一下,希望能帮到不小心路过的网友. 经过一番 IE8, IE10, Chrome, Firefox 交叉测试后,发现 IE8 的状态栏有个小小的安全性提示(本来要截图,结果 … 选了接受 cookie 就 … 看不到图了),幸好有使用 IE8 做测试,真是不幸中的大幸,IE10 完全自己暗槓起来什么都不说啊 ~~~.

IE CSS文件限制

- - Web前端 - ITeye博客
单个页面最多31个css文件. 每个css文件大小最大288k. 每个css文件最多4095个选择器. Resource merging, which help you reduce the number of requests made to the server, may bring the following dilemma in IE.