条件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. PHP中报500错误时如何查看错误信息

    在执行代码中加入下面两行代码即可 ini_set("display_errors","On"); error_reporting(E_ALL);

  2. 2016-03-22 OneZero团队 Daily Scrum Meeting

    会议时间: 2016-03-22 9:33-9:57am 会议内容: 一.在原有Sprint Backlog基础上,我们加了亮点(摇一摇功能:随机选取一条记录在界面显示,以提醒主页君回忆) 需求分析图 ...

  3. 第七次Scrum meeting

    第七次Scrum  meeting 任务及完成度: 成员 12.26 12.27 陈谋 任务1040:完成stackoverflow的数据处理后的json处理(98%) 任务1114-1:完成对网页数 ...

  4. Beta版发布说明

    我们的作品“校友聊”软件的最终版本于6月19日最终发布了,下面我们将对自己的产品进行介绍. 在使用之前,首先要进行用户注册,用户可以自行设置自己的账号,姓名,密码,签名,头像等信息,头像信息也可以在文 ...

  5. 201303014001 张敏 计科高职13-1 github使用心得

    Github:https://github.com/zhangmin131/text 个人心得体会: Git是一种良好的.支持分支管理的代码管理方式,能很好地解决团队之间协作的问题.每个工程师在自己本 ...

  6. 《软件工程》小组团队项目-小学生四则运算APP（First Sprint）

    <软件工程>团队项目我们小组选择了小学生四则运算APP,在上学期原有的项目基础上进行更新升级.(自我感觉我们团队上学期的小学生四则运算APP是较为成功且实用的,不过这学期学习到了新的知识, ...

  7. ubuntu16.04下载安装navicate

    1.下载试用版本地址: https://www.navicat.com.cn/download/navicat-premium 2.解压缩 tar -zxvf  /home/rain/download ...

  8. node的router路由。

    使用router可以实现一个小型的express. router继承了大部分的app = express()的方法. 使用router可以工程化管理项目.router使用以后app只能在最开始去存在. ...

  9. js选择排序。

    <script> , , , , , , , ]; ; j<len; j++ ){ // 假设min为最小值 var minIndex = j; var min = arr[j]; ...

  10. App Store转让App

    转让前提条件:①App在App Store能找到     ②该App没有正在审核中的版本 iOS在App Store转让App的详细步骤, 每一步都有图,照图一步一步来就OK 1.获得接收App的苹果 ...