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. ECMAScript6 规范

    本文探讨如何将ES6的新语法,运用到编码实践之中,与传统的JavaScript语法结合在一起,写出合理的.易于阅读和维护的代码. 多家公司和组织已经公开了它们的风格规范,具体可参阅http://jsc ...

  2. 获取安卓的SH1安全码

     用于获取手机联系人 信息   public static String sHA1(Context context) { try { PackageInfo info = context.getPac ...

  3. Python之collections序列迭代器下标式循环冒泡算法等

    练习题 元素分类 有如下值集合[11,22,33,44,55,66,77,88,99]将所有大于66的数作为一个列表放在字典的key为k1的value小于等于66的为k2的value {'k1':[7 ...

  4. LeetCode4. Median of Two Sorted Arrays---vector实现O(log(m+n)--- findkth

    这道题目和PAT上的1029是同一题.但是PAT1029用O(m+n)的时间复杂度(题解)就可以,这道题要求是O(log(m+n)). 这道题花费了我一个工作日的时间来思考.因为是log因而一直思考如 ...

  5. JAVA引用和垃圾回收

    1.强引用(StrongReference) 强引用是使用最普遍的引用.如果一个对象具有强引用,那垃圾回收器绝不会回收它.如下: 1 Object o=new Object();   //  强引用 ...

  6. 全国各省市GeoCoord SQL文件（不包括区县）

    /* Navicat MySQL Data Transfer Source Server : 192.168.0.234 Source Server Version : 50543 Source Ho ...

  7. DDD理论学习系列（3）-- 限界上下文

    1. 引言 限界上下文可以拆分为两个词,限界和上下文. 限界:是指一个界限,具体的某一个范围. 上下文:个人理解就是语境. 比如我们常说的段子: "我想静静." 这个句子一般是想表 ...

  8. Visual Studio Code for mac

    Visual Studio Code for mac 将下载文件解压拖到应用程序文件夹即可 下载地址:链接: https://pan.baidu.com/s/1geHL5f1 密码: 2fdw

  9. Tomcat 安装与配置

    1. 将压缩文件“apache-tomcat-7.0.62.zip ”上传到linux系统目录:/home/下 2. 进入目录 cd /home/ 解压文件,执行如下命令:unzip apache-t ...

  10. koa-router中路由/后面不填参数就会报404的解决办法

    koa-router 中使用路由参数时会遇到一个问题,就是像下面的代码在没有传入 id 是会报 404 错误 router.get('/:id', (err, ctx, next) => { / ...