条件Hack

语法：

<!--[if <keywords>? IE <version>?]>

HTML代码块

<![endif]-->

<keywords>

if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

是否：
指定是否IE或IE某个版本。关键字：空
大于：
选择大于指定版本的IE版本。关键字：gt（greater than）
大于或等于：
选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
小于：
选择小于指定版本的IE版本。关键字：lt（less than）
小于或等于：
选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
非指定版本：
选择除指定版本外的所有IE版本。关键字：!

<version>

目前的常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上

用于选择IE浏览器及IE的不同版本

  • if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）
<!--[if IE]>

<p>你在非IE中将看不到我的身影</p>

<![endif]-->

示例demo:

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title>if条件Hack_CSS参考手册_web前端开发参考手册系列</title>

<style>

h1{margin:10px 0;font-size:16px;}

span{display:none;}

.not-ie{display:inline;}

</style>

<!--[if IE]>

<style>

.ie{display:inline;}

.not-ie{display:none;}

</style>

<![endif]-->

<!--[if IE 5]>

<style>

.ie5{display:inline;}

</style>

<![endif]-->

<!--[if IE 6]>

<style>

.ie6{display:inline;}

</style>

<![endif]-->

<!--[if IE 7]>

<style>

.ie7{display:inline;}

</style>

<![endif]-->

<!--[if IE 8]>

<style>

.ie8{display:inline;}

</style>

<![endif]-->

<!--[if IE 9]>

<style>

.ie9{display:inline;}

</style>

<![endif]-->

</head>

<body>

<div>

    您正在使用

    <span class="not-ie">非IE</span>

    <span class="ie">IE</span>

    <span class="ie5">5</span>

    <span class="ie6">6</span>

    <span class="ie7">7</span>

    <span class="ie8">8</span>

    <span class="ie9">9</span>

    浏览器

</div>

</body>

</html>

CSS 属性 HACK

语法：

selector{<hack>?property:value<hack>?;}

_：

选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。
*：
选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
\9：
选择IE6+
\0：
选择IE8+和Opera
[;property:value;];：
选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意多个规则
[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。

选择不同的浏览器及版本

  • 尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎
  • 通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。

  • 一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

示例：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title></title>

<style>

h1{margin:10px 0;font-size:16px;}

.test{

    color:#c30;          /* For Firefox */

    [;color:#ddd;];      /* For webkit(Chrome and Safari) */

    color:#090\0;        /* For Opera */

    color:#00f\9;        /* For IE8+ */

    *color:#f00;         /* For IE7 */

    _color:#ff0;         /* For IE6 */

}

</style>

</head>

<body>

<div class="test">在不同浏览器下看看我的颜色吧</div>

</body>

</html>

前端学习 -- Html&Css -- 条件Hack 和属性Hack的更多相关文章

  1. 前端学习：CSS的学习总结(图解）

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  2. 前端学习 之 CSS（二）

    五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...

  3. web前端学习笔记(CSS盒子的浮动)

    在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性 ...

  4. 2016.01.22 前端学习 HTML/CSS

    学习HTML/CSS  http://edu.51cto.com/course/course_id-3116.html 明日实践

  5. 前端学习 之 CSS（三）

    九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...

  6. 前端学习之CSS

    CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...

  7. 前端学习笔记——CSS选择器

    学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...

  8. 前端学习 之 CSS（一）

    一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...

  9. 前端学习笔记 - Css初级篇

    有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...

随机推荐

  1. [JSOI2016]轻重路径[树链剖分]

    题意 题目链接 分析 先对原树树剖,在一次删点操作后从根节点开始二分,如果一条边从重边变成轻边,必然有 \(size_u\le \frac{1}{2}size_{rt}\) (取等号是特判对应儿子消失 ...

  2. 聊聊Zookeeper应用场景、架构设计、选主机制

    Zookeeper作为一个分布式协调系统提供了一项基本服务:分布式锁服务,分布式锁是分布式协调技术实现的核心内容.像配置管理.任务分发.组服务.分布式消息队列.分布式通知/协调等,这些应用实际上都是基 ...

  3. 详解javascript中this的工作原理

    在 JavaScript 中 this 常常指向方法调用的对象,但有些时候并不是这样的,本文将详细解读在不同的情况下 this 的指向. 一.指向 window: 在全局中使用 this,它将会指向全 ...

  4. 个人java框架 技术分析

    1.框架选型 spring-boot https://github.com/JeffLi1993/springboot-learning-example https://mp.weixin.qq.co ...

  5. 从源码的角度看 React JS 中批量更新 State 的策略（下）

    这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源 ...

  6. Linux下的计算命令和求和、求平均值、求最值命令梳理

    在Linux系统下,经常会有一些计算需求,那么下面就简单梳理下几个常用到的计算命令 (1)bc命令bc命令是一种支持任意精度的交互执行的计算器语言.bash内置了对整数四则运算的支持,但是并不支持浮点 ...

  7. 安装Visual Studio2013

    安装Visual Studio2013现在官网下载在选择安装的可选功能这里,大家可以根据自己需要勾选,也可以默认全选.这里有个小功能,把鼠标放在文字上,会弹出各个功能的详细描述.选择四个常用的功能,另 ...

  8. Scrutiny of Partner's individual project Code

    因为队友的代码并没有完整的实现个人项目的完整功能. 已实现功能: 1.对单个单词进行词频统计 2.能够按照老师的要求的格式对制定的有效字符串进行匹配,并且输出至指定文件. 未实现: 1.对连续多个单词 ...

  9. Sprint第三个计划

    这一次是最后的一个阶段,承上启下.这一阶段我们将转向Android的主要设计.加油,最后十天.

  10. Essential Netty in Action 《Netty 实战(精髓)》读书笔记一

    NIO 最初是为 New Input/Output 的缩写.然而,Java 的 API 已经存在足够长的时间,它不再是新的.现在普遍使用的缩写来表示Nonblocking I/O (非阻塞 I/O). ...