CSS Hack

直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为

#content{

background:red; /* 所有浏览器 */

background:orange\9; /* 所有IE浏览器 */

*background:yellow; /* IE7和IE6 */

+background:green; /* IE7 */

_background:blue; /* IE6 */

}

还有一些hack不太实用，就不一一列举了。
CSS Hack的缺点是CSS文件无法通过W3C验证，代码阅读时会很奇怪。

条件注释CSS文件

条件注释是写在html里的只会被IE识别的代码，一般在<head>区域通过不同的条件注释导入不同的CSS，不同的IE浏览器会引用不同的CSS。下面的4段注释依次表示"在IE下使用"、“低于IE8时使用”、“IE7时使用”、“IE6时使用”：

<!--[if IE]>

<link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" />

<![endif]-->

<!--[if lt IE 8]>

<link rel="stylesheet" href="/ie.css" type="text/css" media="screen" />

<![endif]-->

<!--[if IE 7]>

<link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" />

<![endif]-->

<!--[if IE 6]>

<link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" />

<![endif]-->

由于IE8下CSS问题较少，一般只需要为IE6、7写一点修正代码。如果需要，可以在ie.css里用CSS Hack对IE6/7进行差异处理。

<!--[if lt IE 8]>

<link rel="stylesheet" href="/ie.css" type="text/css" media="screen" />

<![endif]-->

条件注释CSS文件的缺点是会增加至少1次http请求，影响渲染速度，而且维护时不够方便。

条件注释<html>

条件注释<html>跟上面的方法原理一样，只不过这里是给<html>注释不同的class。

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

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

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

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

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

这样在CSS中使用下面的代码即可区分版本

#content{background:red;}

.ie9 #content{background:orange;}

.ie8 #content{background:yellow;}

.ie7 #content{background:green;}

.ie6 #content{background:blue;}

你也可以增加诸如.ltie8这样的class来实现更方便的版本分组管理。这个方法不会增加http请求，而且不需要任何hack。

IE中的判断语句

上面写的<!--[if lte IE 6]>在正常的HTML中属于注释，不会被执行，但在IE中是一个判断语句，所以这些代码只有在IE中才会被识别并加载。

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ： 就是不等于的意思，跟javascript里的不等于判断符相同

网页中区分IE各版本的更多相关文章

  1. 网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法

    由于万恶的IE6和IE7,我们在页面重构时不免要对其进行各种bug修复及差异化处理.在标准浏览器中可实现的效果在IE里却有各种离奇问题,例如IE6.IE7不能良好应对的inline-block和.cl ...

  2. PluginOK中间件高级版-支持在Chrome、Edge、Firefox等浏览器网页中真正内嵌ActiveX等控件运行的版本已获多家上市公司采购

    PluginOK(牛插)中间件(原名:本网通WebRunLocal)是一个实现WEB浏览器(Web Browser)与本地程序(Local Application)之间进行双向调用的低成本.强兼容.安 ...

  3. web网页中使用vlc插件播放相机rtsp流视频

    可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 使用vlc进行二次开发做自己的播放器 vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放 ...

  4. 网页中插入外部视频的几种方法（PC与手机网页通用）

    网页中加入视频的几种方法(PC与手机网页通用) 方法一: <!doctype html> <html> <head> <meta charset=" ...

  5. 如何把报表放到网页中显示（Web页面与报表简单集成例子）

    1.问题描述 现在用户开发的系统基本上趋向于BS架构的浏览器/服务器模式,这些系统可能由不同的语言开发,如HTML.ASP.JSP.PHP等,因此需要将制作好的报表嵌入到这些页面中. FineRepo ...

  6. 网页中导入特殊字体@font-face属性详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...

  7. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  8. 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)

    在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...

  9. embed标签的使用(在网页中播放各种音频视频的插件的使用)

    播放器插件使用说明: 代码:< EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”> src:音乐文件的路 ...

随机推荐

  1. poj2785双向搜索

    The SUM problem can be formulated as follows: given four lists A, B, C, D of integer values, compute ...

  2. 在android中，如何去掉webview读取网页后点击网页上的按钮出现的方框

    参考:http://blog.sina.com.cn/s/blog_64056edc0100xt3l.html <style type="text/css"> .bor ...

  3. 最大流算法之Dinic

    引言: 在最大流(一)中我们讨论了关于EK算法的原理与代码实现,此文将讨论与EK算法同级别复杂度(O(N^2M))的算法--Dinic算法. Dinic算法用到的思想是图的分层结构,通过BFS将每一个 ...

  4. C#集合之有序列表

    如果需要基于键对所需集合排序,就可以使用SortedList<TKey,TValue>类.这个类按照键给元素排序.这个集合中的值和键都可以使用任何类型.定义为键的自定义类型需要实现ICom ...

  5. Lamp环境搭建Linux CentOS6.5编译安装mysql5.6

    经典web开发组合Lamp环境搭建之mysql安装详解 安装前准备 通过rpm命令检查centos上是否已经安装mysql,然后卸载已经存在的mysql版本 [root@localhost src]# ...

  6. 2.从AbstractQueuedSynchronizer(AQS)说起(1)——独占模式的锁获取与释放

    首先我们从java.util.concurrent.locks包中的AbstraceQueuedSynchronizer说起,在下文中称为AQS. AQS是一个用于构建锁和同步器的框架.例如在并发包中 ...

  7. web.xml报错

    The content of element type "web-app" must match "(icon?,display-name?,description?,d ...

  8. SmartCoder每日站立会议10

    站立会议内容: 准备为上交第一阶段项目进行加班,将各个页面联系起来,静态地图变为动态转换,考虑地图全屏或者是小屏即消息展示方式 1.站立会议照片:      2.任务展板: 3.燃尽图:

  9. iOS安全攻防之使用 Charles 进行网络数据抓包 和 Paros 网络抓包

    Charles 是 Mac 系统下常用的网路抓包工具(Paros 也不错),windows 下常用 fiddler.正版的 Charles 是收费的(PS:支持正版),天朝人民比较喜欢破解版的Char ...

  10. 如何运行容器？- 每天5分钟玩转 Docker 容器技术（22）

    上一章我们学习了如何构建 Docker 镜像,并通过镜像运行容器.本章将深入讨论容器:学习容器的各种操作,容器各种状态之间如何转换,以及实现容器的底层技术. 运行容器 docker run 是启动容器 ...