条件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. Mac下通过VMware Fusion安装centos虚拟机操作记录

    下面介绍下利用VMware Fusion工具在Mac上安装centos虚拟机的做法:1)下载VMware Fusion工具下载地址(包括注册码):http://www.macx.cn/thread-2 ...

  2. 数组-在Shell脚本中的基本使用介绍

    Shell脚本在运维工作中是极其重要的,而数组在shell脚本里的运用无论是在循环或运算方面都是非常实用的一个环节.下面是对shell脚本中数组方面一些操作在此进行记录,希望能帮助到有兴趣的朋友~1. ...

  3. PLSQL使用技巧 如何设置默认显示My Objects、记住密码等

    https://www.cnblogs.com/yilinzi/p/7144852.html PL/SQL Developer实现双击table查询 https://blog.csdn.net/zhy ...

  4. Word frequency program ver.1

    先吐槽一下自己 做这个作业的时候完全没有提前考虑好时间 导致要提交前一天晚上通宵写代码 而且还满满的bug TAT 缓一口气 程序还在继续写 先把有点累 想着先把博客写了 PART I 预计时间: 语 ...

  5. 实验--使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用(杨光)

    使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 攥写人:杨光  学号:20135233 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程 ...

  6. Linux内核分析——第七章 链接

    第七章——链接 1.链接是将各种代码和数据部分收集起来并组合成为一个单一文件的过程,这个文件可被加载到存储器并执行. 2.链接可以执行于编译时,加载时,运行时. 7.1编译器驱动程序 1.大多数编译系 ...

  7. 学习github心得

    Git 是 Linux 的创始人 Linus Torvalds 开发的开源和免费的版本管理系统,利用底层文件系统原理进行版本控制的工具.Git是目前为止最著名运用最好最受欢迎的分布式的配置管理工具. ...

  8. 软件工程项目之摄影App（总结）

    软件工程项目之摄影App 心得体会: dyh:这次的项目很难做,本来想在里面添加动画效果的,但是找了很多例子都没看明白,能力还是不足够把,还有一个就是数据库在安卓课程里面刚刚涉及到,所以也还没能做出数 ...

  9. Hibernate_HQL

    public class According_condition { public static void main(String[]args){ Session session=HibernateU ...

  10. Event事件2

    1,阻止默认行为: 2,事件监听 3,事件流之事件捕获 4,事件委托 阻止默认行为 浏览器中有很多默认行为,比如当点击a标签后,会发生链接的跳转.当点击鼠标的右键时, 会显示右键菜单等. 有些时候,浏 ...