条件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. java 双因素认证（2FA）TOTP demo

    TOTP 的全称是"基于时间的一次性密码"(Time-based One-time Password).它是公认的可靠解决方案,已经写入国际标准 RFC6238. 很早就知道有这个 ...

  2. [朴孝敏][Ooh La La]

    歌词来源:http://music.163.com/#/song?id=484058960 作曲 : Damon Sharpe/Jimmy Burney/Adam Kapit [作曲 : Damon ...

  3. [Android]记录一次处理app:transformDexArchiveWithExternalLibsDexMergerForDebug错误

    第一种情况: Android 目录结构如下: app中build.gradle包含: implementation 'com.squareup.okhttp3:okhttp:3.6.0' implem ...

  4. ACM-ICPC 2018 沈阳赛区网络预赛 G. Spare Tire

    这题很好啊,好在我没做出来...大概分析了一下,题目大概意思就是求 问所有满足1<=i<=n且i与m互素的ai之和 最开始我们队的做法是类似线性筛的方法去筛所有数,把数筛出来后剩下数即可, ...

  5. Vuex实现原理解析

    我们在使用Vue.js开发复杂的应用时,经常会遇到多个组件共享同一个状态,亦或是多个组件会去更新同一个状态,在应用代码量较少的时候,我们可以组件间通信去维护修改数据,或者是通过事件总线来进行数据的传递 ...

  6. 跟踪分析Linux内核的启动过程--实验报告 分析 及知识重点

    跟踪分析Linux内核的启动过程 攥写人:杨光  学号:20135233 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.stud ...

  7. nginx+tpmcat+redis实现session共享

    nginx+tpmcat+redis实现session共享 版本:nginx nginx-1.8.0.tar.gztomcat apache-tomcat-7.0.78.tar.gzredis  re ...

  8. 软件工程（五）UML

    UML 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言.包括UML语义和UML表示法两个元素. UMl图由事物和关系组成,事物:UML模型中最基本的构成元素,是具有代表性 ...

  9. Practice3 阅读《构建之法》1-5章

    第一章:概论 本章主要是讲了软件工程的基本概念,软件工程的最终目标是创造“足够好”的软件. 提出问题:什么是BUG?(出自1.2.5节) 答:就我个人而言,在许多游戏中也有许多的BUG,BUG这一词在 ...

  10. Jquery Jquery对象和DOM对象的微妙联系

    声明变量 var  $variable=             Jquery 对象: var  varibake=             DOM对象: var $cr= $("#id&q ...