让你的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浏览器仍然相当普遍,特别是在那些发展中国家。欣慰的是,上面的这些工具在所有浏览器里都可以使用。
让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法的更多相关文章
- HTML中的IE条件注释,让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案
最近的项目中,因为需要兼容IE7,IE8,IE9,解研究了IE的条件注释,顺手写下来备忘. HTML中的IE条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解. ...
- 12款非常精致的免费 HTML5 & CSS3 网站模板
01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示 下载 02. Folder ...
- 12个新潮的 HTML5 & CSS3 网站设计欣赏
响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案. HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览. 今天, ...
- 12款界面精美的 HTML5 & CSS3 网站模板
这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...
- 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板
创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...
- 12款高质量的响应式 HTML5/CSS3 网站模板
HTML5 已经成为众所周知的语言,大量的 HTML5 资源和工具正在建立,以帮助开发人员和设计人员.今天,我们展示12款免费的响应式 HTML5/CSS3 网站模板,帮助你创建醒目和视觉震撼的网站. ...
- HTML5+CSS3网站设计教程 (张晓景,胡克) [iso]
<HTML5+CSS3网站设计教程>系统地讲解了CSS的基础理论和实际运用技术,并结合多个案例讲解了采用CSS与层布局相结合制作网页的方法,在详细讲解各个案例的制作中,不仅介绍了CSS样式 ...
- 让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案
现在我们可以选择浏览器非常多,所以浏览器的环境也是种类繁多,同一个浏览器也是包含各种不同的版本,不同的版本之间的渲染方法也存在差异,,它们支持的 HTML5.CSS3 特性恐怕也不尽相同.这种情况于是 ...
- 响应式HTML5+CSS3 网站开发测试实践
仅仅利用media query适配样式是远远不够的,并没有考虑触屏下的行为和特有的内容组织方式的不同.简单在桌面版基础上叠加mobile版的代码,会带来请求增多.流量.性能.代码冗余等诸多方面问题.有 ...
随机推荐
- SVN基础操作
SVN基础操作 安装 #大多数Linux版本自带svn svn --version #如果没有安装可用yum安装 yum install subversion 生命周期 创建版本库 检出 更新 执行变 ...
- GitHub 新手教程 六,Git GUI 新手教程(3),从GitHub远端同步代码库
从GitHub把代码库下载到本地: 1,打开 GitGUI,单击我们之前克隆好的本地库: 2,按图片所示点击,同步远端代码: 3,出现如下提示后,点击“Close”: 4,上面只是把代码下载下来,还没 ...
- Catlike学习笔记(1.1)-使用Unity实现一个钟表
最近发现『Catlike系列教程』觉得内容真的很赞,感觉有很多地方涉及到了我的知识盲点,如果真的可以照着做下来一遍的话应该收获颇丰.因为教程很长所以逐字翻译不太可能了(主要是翻译的太差).基本上就是把 ...
- 容器flappybird游戏——图文操作指引贴
第一步:打开华为云容器引擎产品首页,点击免费体验馆 第二步:进入免费体验馆,点击体验按钮,获得3天免费集群 第三步:创建免费集群完成后,进入产品console页,如图所示: 第四步:如 ...
- 小刘的机器学习---SVM
前言: 这是一篇记录小刘学习机器学习过程的随笔. 正文: 支持向量机(SVM)是一组用于分类, 回归和异常值检测的监督学习方法. 在分类问题中,SVM就是要找到一个同时离各个类别尽可能远的决策边界即最 ...
- @JsonFormat时间格式化注解使用
@JsonFormat注解是一个时间格式化注解,比如我们存储在mysql中的数据是date类型的,当我们读取出来封装在实体类中的时候,就会变成英文时间格式,而不是yyyy-MM-dd HH:mm:ss ...
- Day Three
站立式会议 站立式会议内容总结 442 今天:从本地导入电子书页面编写以及部分逻辑代码 遇到的问题:界面适配问题 明天:具体计划界面的编写,解决上面问题 331 今天:监听webview滑动底端事件 ...
- WPF和js交互 调用窗体中的方法
public partial class WebTest: Window { private void Window_ContentRendered(object sender, EventArgs ...
- C# 多线程初级汇总
异步委托 创建线程的一种简单方式是定义一个委托,并异步调用它 委托是方法的类型安全的引用 Delegate类还支持异步地调用方法.在后台,Delegate类会创建一个执行任务的线程 投票,并检查委托是 ...
- 【刷题】LOJ 6014 「网络流 24 题」最长 k 可重区间集
题目描述 给定实直线 \(L\) 上 \(n\) 个开区间组成的集合 \(I\) ,和一个正整数 \(k\) ,试设计一个算法,从开区间集合 \(I\) 中选取出开区间集合 \(S \subseteq ...