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. php函数每日学习二十个

    数学函数 1,abs() 求绝对值 2,ceil() 进一法取整 3,floor() 舍去法取整 4,fmod()对浮点数进行取余 例如fmod(5.7,1.3) 5,pow() 返回数的n次方 po ...

  2. java线程（三）

    线程代码同步与线程锁 为什么要有同步代码块? 线程同步的出现是为了解决多个线程对统一资源操作而引发的数据混乱问题.这里引用一个经典demo-银行转账操作,场景如下,小明的账户目前有1000人民币,他在 ...

  3. sublime设置 快捷键（自动换行）

    一.菜单view > word wrap选上就好了 二.如果让编辑器默认是自动换行的话把它保存到配置中 Preference > Settings-User插入以下一行配置 "w ...

  4. Linux下的Jenkins+Tomcat+Maven+Gitlab+Shell环境的搭建使用（jenkins自动化部署）

    jenkins自动化部署 目标:jenkins上点构建(也可以自动检查代码变化自动构建)>>>项目部署完成. 一.安装jenkins 1.下载jenkins 这里我选择的是war包安 ...

  5. Linux使用Jexus托管Asp.Net Core应用程序

    第一步 安装.Net Core环境 安装 dotnet 环境参见官方网站 https://www.microsoft.com/net/core. 选择对应的系统版本进行安装.安装完成过后 输入命令查看 ...

  6. ConcurrentHashMap源码解析

    转自:http://www.iteye.com/topic/344876 ConcurrentHashMap是Java 5中支持高并发.高吞吐量的线程安全HashMap实现. 实现原理 锁分离 (Lo ...

  7. Fast Fourier Transform ——快速傅里叶变换

    问题: 已知$A=a_{0..n-1}$, $B=b_{0..n-1}$, 求$C=c_{0..2n-2}$,使: $$c_i = \sum_{j=0}^ia_jb_{i-j}$$ 定义$C$是$A$ ...

  8. 谈一谈JDK8的函数式编程 （一）

    系列之前我想说的   最近有一段时间没写博客了,这几天回到学校,才闲下来,决定写一写最近学习到的只是,既是为了分享,也是为了巩固.之前看到过一篇调查,文章的数据是学习新知识,光是看只能获得大约5%,然 ...

  9. Android 内存泄漏分析与解决方法

    在分析Android内存泄漏之前,先了解一下JAVA的一些知识 1. JAVA中的对象的创建 使用new指令生成对象时,堆内存将会为此开辟一份空间存放该对象 垃圾回收器回收非存活的对象,并释放对应的内 ...

  10. zabbix监控redis

    导入监控模板 点击[configuration]-->[templates]-->[import],导入xml监控模板. 配置客户端key 在被监控的主机上,新建/etc/zabbix/z ...