为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在width下面,对于非IE浏览器会解析到width,而对于IE6来说,会用_width覆盖前面的width规则,从而达到针对IE6浏览器的兼容。对于IE其他版本(6~11),也存在同样的兼容性处理方法。虽然本站不对IE做特别的兼容性测试,基本上只支持Chrome/FF/Edge/Safari,但有时候客户项目会有这方面需求,下面是一个速查表:

div {
property:value\0;  /* ie 8/9*/
property:value\9\0;  /* ie 9*/
*property:value;  /* ie 7*/
_property:value;  /* ie 6*/
}

IE 6

* html .ie6 {property:value;}

or

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

or

*:first-child+html .ie7 {property:value;}

IE 6 and 7

@media screen\9 {
    .ie67 {property:value;}}

or

.ie67 { *property:value;}

or

.ie67 { #property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {
    .ie678 {property:value;}}

IE 8

html>/**/body .ie8 {property:value;}

or

@media \0screen {
    .ie8 {property:value;}}

IE 8 Standards Mode Only

.ie8 { property /*\**/: value\9 }

IE 8,9 and 10

@media screen\0 {
    .ie8910 {property:value;}}

IE 9 only

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}}

IE 9 and above

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}}

IE 9 and 10

@media screen and (min-width:0\0) {
    .ie910{property:value\9;} /* backslash-9 removes ie11+ & old Safari 4 */}

IE 10 only

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 and above

_:-ms-lang(x), .ie10up { property:value; }

or

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}}

IE 11 (and above..)

_:-ms-fullscreen, :root .ie11up { property:value; }

IE各版本CSS Hack(兼容性处理)语法速查表的更多相关文章

  1. Markdown 语法速查表

      Markdown 语法速查表 1 标题与文字格式 标题 # 这是 H1 <一级标题> ## 这是 H2 <二级标题> ###### 这是 H6 <六级标题> 文 ...

  2. javascript语法速查表

  3. css hack 兼容性

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来 达到大家要求的页面表现.我个人是不太推荐使用hack的,要知 ...

  4. Java, C#, Swift语法对比速查表

    原文:Java, C#, Swift语法对比速查表   Java 8 C# 6 Swift 变量 类型 变量名; 类型 变量名; var 变量名 : 类型; 变量(类型推断) N/A var 变量名= ...

  5. Python语法速查: 4. 字符串常用操作

    返回目录 (1)字符串常用方法 Python3中,字符串全都用Unicode形式,所以省去了很多以前各种转换与声明的麻烦.字符串属于序列,所有序列可用的方法(比如切片等)都可用于字符串. 注意:字符串 ...

  6. HTML、CSS、JS、JQ速查笔记

      一.HTML  1.编写html文件 a.格式 <!DOCTYPE html> <html> <head> <title>标题</title& ...

  7. css选择器语法速查

    通用选择器 *{} 类似于通配符,匹配文档中所有元素类型: 类型选择器 h1,h2,p{} 匹配以逗号隔开元素列表中的所有元素 类选择器 .glass{} or p.glass{} id选择器 #id ...

  8. perl 语法速查

    同时学perl.python和shell脚本会很容易将它们的语法搞混,本文主要是一个个人的总结,方便要用时的查询. perl基本语法.安装.帮助文档 文件头格式: #!/usr/bin/perl us ...

  9. css字体中英速查表

    例1(小米米官网):font-family: "Arial","Microsoft YaHei","黑体","宋体",s ...

随机推荐

  1. 欢乐水杯(happy glass)中流体的一种实现!图文视频讲解 ! Cocos Creator!

    使用cocos creator v2.2.2 实现流体效果 ! 图文+视频讲解! 效果预览 实现原理 整体思路是参考论坛中的一个帖子 这款游戏中水的粘连效果在Construct3中利用图层很容易实现, ...

  2. 微信开发+百度AI学习:微信网页开发环境搭建

    参考微信官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 两步即可获取微信网页开发能力 STEP1: ...

  3. [离散化+树状数组]CodeForces - 652D Nested Segments

    Nested Segments time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  4. [STL] Codeforces 69E Subsegments

    Subsegments time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  5. 比CNN表现更好,CV领域全新卷积操作OctConv厉害在哪里?

    CNN卷积神经网络问世以来,在计算机视觉领域备受青睐,与传统的神经网络相比,其参数共享性和平移不变性,使得对于图像的处理十分友好,然而,近日由Facebook AI.新家坡国立大学.360人工智能研究 ...

  6. FME中按照ID值过滤块参照中的多个要素

  7. 用pymysql和Flask搭建后端,响应前端POST和GET请求

    前言 这次作业不仅需要我建立一个数据库(详情请点击这里),还需要我基于这个数据库写后端接口(注册和登录)供前端访问,接收前端的POST和GET请求,并将登录.注册是否成功传给前端. 本文介绍如何用Fl ...

  8. [vijos]1051送给圣诞夜的极光<BFS>

    送给圣诞夜的极光 题目链接:https://www.vijos.org/p/1051 这是一道很水很水的宽搜水题,我主要是觉得自己在搜素这一块有点生疏于是随便找了一题练手,找到这么一道水题,原本以为可 ...

  9. 面向对象编程基础(java)

    面向对象编程基础 1.1 面向对象概述 在程序开发初期,大家使用的是结构化开发语言,也就是面向过程(opp),但随着市场需求剧增,软件的规模也越来越大,结构化语言的弊端也暴露出来. 开发周期无休止的拖 ...

  10. 实验十一 MySQLl备份与恢复1

    实验十一 MySQL备份与恢复 一.  实验内容: 1. 使用SQL语句导入和导出表数据 2. 使用客户端工具备份还原数据库 3. 使用日志文件恢复数据库 二.  实验项目:学生成绩数据库 创建用于学 ...