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. 让div自适应浏览器窗口居中显示

    今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...

  2. linux优化之SElinux关闭

    查看selinux状态: # getenforce   注:Enforcing表示开启,Permissive表示禁用 临时关闭或开启selinux: # setenforce  [1|0]  注:1是 ...

  3. Docker基于已有的镜像制新的镜像

    1.根据运行的容器制作镜像 #查看所有的容器 docker ps #暂停当前容器 docker pause COTNAINER-ID #将容器运行当前状态提交 docker commit COTNAI ...

  4. ajax返回json数据示例

    前端发送请求与接收数据: $.ajax({        type : "post",        url : "/queryStudent",       ...

  5. NancyFx 2.0的开源框架的使用-Forms

    同样的像前面2篇博文一样,每个项目的开始基本都是建个空的Web项目 在NuGet库中安装以下几个NuGet包 Nancy Nancy.Authentication.Forms Nancy.Hostin ...

  6. Longest Palindromic Substring2015年6月20日

    Given a , and there exists one unique longest palindromic substring. 自己的解决方案; public class Solution ...

  7. java 空指针异常造成的原因有哪些

    实际上 空指针异常   也就是你用了一个没有实际值的对象 1. 某一对象没有被实例化,就拿来使用,如调用此对象的方法,会抛空指针异常. 2. 获取从别的对象传过来的对象为空 3. 数据库查询方面的空指 ...

  8. jQuery中易混淆知识点总结（持续更新）

    find()与children() <body> <ul class="level-1"> <li class="item-i"& ...

  9. Spring Mvc 用Demo去学习

    1:首先大体知道 SpringMVC 框架的 运行原理(图片来自网络 ) 2:SpringMVC 是依照DispatcherServlet 展开的 这里可以约Structs2对比,structs2 是 ...

  10. 基于binlog来分析mysql的行记录修改情况（python脚本分析）

          最近写完mysql flashback,突然发现还有有这种使用场景:有些情况下,可能会统计在某个时间段内,MySQL修改了多少数据量?发生了多少事务?主要是哪些表格发生变动?变动的数量是怎 ...