让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法

起初,IE其实也是一款非常有进取心的浏览器。但经过一段时间的蛰伏后,它已经成为了我们生活中的一道障碍。微软现在又重新开始向其它浏览器发起挑战,但事实情况是,新版的现代IE浏览器一直滞后于谷歌浏览器和火狐浏览器。我们还不得不想办法兼容早期的IE浏览器。下面提到的三种方法能快捷轻松的让你的HTML5&CSS3网站在微软的主要浏览器中也能神奇的运行!

  htmlshiv.js

  Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理?你可能花几天也想不明白,但谁在意呢!这个脚本几乎是所有正式网站必用的js。

<!--[if lt IE 9]>

<script src="dist/html5shiv.js"></script>

<![endif]-->
  selectivizr.js

Selectivizr.js是一款神奇的工具,它能提供大量IE不支持的CSS选择器和属性,包括所有的last-child选择器。最近在网站改版过程中,我使用了selectivizr,网站竟然可以毫不走样的在老式IE浏览器的正常显示。下面是我使用的代码片段:

<!--[if lte IE 8]><script src="js/libs/selectivizr.js"></script><![endif]-->

  现代新技术WEB项目不可缺少的js库。它只会在老式IE里加载。

  <html>条件判断注释

  你一定见到过这种极其丑陋的条件判断注释。然而,丑虽丑,它却能让你的网页能按你希望的方式运行:

<!DOCTYPE html>

<!--[if lt IE 7 ]> <html class="ie6 lazy " lang="en"> <![endif]-->

<!--[if IE 7 ]>    <html class="ie7 lazy " lang="en"> <![endif]-->

<!--[if IE 8 ]>    <html class="ie8 lazy " lang="en"> <![endif]-->

<!--[if IE 9 ]>    <html class="ie9 lazy " lang="en"> <![endif]-->

<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

  这段代码不需要JavaScript,不需要等待JavaScript的加载,你定义的CSS样式会立即生效起作用,没有那种因为加载延迟而出现的样式闪变。

  虽然IE在奋起直追它的那些竞争对手,但现实情况是老式的IE浏览器仍然相当普遍,特别是在那些发展中国家。欣慰的是,上面的这些工具在所有浏览器里都可以使用。

时间: 2024-12-11 10:15:41

让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法的相关文章

12个新潮的 HTML5 &amp; CSS3 网站设计欣赏

响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案. HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览. 今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 您可能感兴趣的相关文章 那些让人赞不绝口的创新 HTML5 网站 激发你灵感的20个多彩的网页作品案例 30个独具匠心的精美单页网站设计案例 20个与众不同的网页联系表单设计案

12款高质量的响应式 HTML5/CSS3 网站模板

HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 经典网页设计:25个应用视差滚动单页网站 经典网页设计:20个新鲜出炉 HTML5 网站 经典网页设计:20例简洁精美着陆页面设计 经典网页设计:20个简约风格电子商务网站 Runkeeper Prologue Zvalencia

扁平化设计的 HTML5 &amp; CSS3 网站模板

Persona – HTML5 Parallax Portfolio Theme 充满吸引力的一款网站模板,扁平化设计风格,动感的视差滚动效果. 在线演示     模板下载 Superb – Responsive One-Page Portfolio Superb 是一个基于 HTML5 & CSS3 的响应式单页作品集网站模板. 在线演示     模板下载 Next – Unique & Easy Portfolio Template 这款精美的网站模板提供了三套风格的设计:全屏背景.单

响应式HTML5+CSS3 网站开发测试实践

仅仅利用media query适配样式是远远不够的,并没有考虑触屏下的行为和特有的内容组织方式的不同.简单在桌面版基础上叠加mobile版的代码,会带来请求增多.流量.性能.代码冗余等诸多方面问题.有统计说86%的手机站看起来small其实体积比桌面版还大. 我们这次充分发挥“响应”的灵活性,实现one web. 响应式开发就为了实现one web: 1. 响应性的模块原本网站的模块化程度越高越便于做响应性开发.一个page例如是这样组织的:<%include file=”path/mod1.h

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

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

WIN7安装COGNOS8后配置IIS网站后,访问COGNOS站点网页一直显示空白,解决方法(转载)

今天我机器上(WIN7)安装了COGNOS8后,发现IIS里发布的网站访问出现了空白,再翻阅众多的帖子网友的回答中看到一丝希望,便照着做,果不然真的能成功. 方法如下: 进入:控制面板 - 卸载程序 - 打开或关闭Windows功能 如果访问任何不存在页面或页面出错时空白: Internet 信息服务 - 万维网服务 - 常见 HTTP 功能 - HTTP 错误 打勾 如果访问任何存在的页面时出现空白: Internet 信息服务 - 万维网服务 - 静态内容 打勾 然后单击“确定”即可.

利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. 1 .container{ 2 background-size: 100% 100%; 3 transition: all 2s; 4 } 5 .container:hover{ 6 background-size: 120% 120%; 7 } 这种方法有个问题是图片缩放的时候会出现抖动的现象 2.利用scale 使用img标签,并在img标签上添加transform属

HTML5+CSS3学习笔记(一)

前段时间一直在学Python,不仅仅只是学Python的基础语法,还有科学计算,主要是Numpy和Matplotlib,爬虫,暂时还没有用到Scrapy那么高端的库,还停留在Python自带的urrllib模块,还有BeautifulSoup解析器,我发现,Web的问题,始终绕不过去.不得不承认的是,Web已经成为数据获取的主要渠道,所以有必要了解其机理性的一些规则,更何况,话有一点小私心,就是想做一个个人网站出来.总而言之,Web的知识是必须得学的,最直接的,自然就是HTML.CSS和Java

运用HTML5+CSS3+Zepto构建移动web网站!

手机微站.HTML5+CSS3(rem)+jQuery+Zepto+iScroll+Swipe综合开发手机网站. 移动端web网站(手机网站).mobile网站模版.HTML5网站 面向手机端的html5开发框架有很多,如何找到适合自己的一个呢? 1.jQuery Mobile jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球主流的移动平台.