条件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. UWP简单示例（三）：快速开发2D游戏引擎

    准备 IDE:Visual Studio 图形 API:Win2D MSDN 教程:UWP游戏开发 游戏开发涉及哪些技术? 游戏开发是一门复杂的艺术,编码方面你需要考虑图形.输入和网络 以及相对独立的 ...

  2. Mvc_前后端绑定数据json集合

    ViewBag.SysModuleList =new  List<SysModule>(){.....}; var data = @Html.Raw(Json.Encode(ViewBag ...

  3. 关于Win10下IE11只能以管理员身份运行的处理方式

    今天无意间发现IE无法启动,后来研究发现只有用管理员身份运行才能打开,初步分析应该是用户权限的问题,在网上百度了一番,找到了处理的方法,在此分享一下 1.win+R 调出“运行”命令,输入“reged ...

  4. M2事后会议报告

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? Beta阶段的爬虫需要更稳定.更高效.操作更便捷.在定义中爬取对性能和功能的要求高,典型用户和场景 ...

  5. linux第一次读书笔记

    第一章 LINUX内核简介 1.1 Unix的历史 1969年的夏天,贝尔实验室的程序员们在一台PDR-7型机上实现了Unix这个全新的操作系统. 1973年,整个Unix系统用C语言进行了重写,给后 ...

  6. 软件工程个人项目作业 Individual Project

    利用Junit4进行程序模块的测试,回归测试 源码 https://github.com/dpch16303/test/blob/master/%E5%9B%9E%E5%BD%92%E6%B5%8B% ...

  7. 【目标跟踪】相关滤波算法之MOSSE

    简要 2010年David S. Bolme等人在CVPR上发表了<Visual Object Tracking using Adaptive Correlation Filters>一文 ...

  8. 第二个spring

    由于第一个spring已经完成,我们现在进去第二个spring! 陈志棚:成绩的统筹 李天麟:界面音乐 徐侃:代码算法   plan好布局,分配任务,控制时间!

  9. 阅读<构建之法>第10、11、12章

    第10章 典型用户和场景 10.2 规格说明书 10.3 功能驱动的设计 问题:怎样写好spec?功能驱动设计的功能设计阶段怎样实现一个具体的功能? 第11章 软件设计与实现 11.2开发阶段的日常管 ...

  10. 分布式版本控制系统Git的安装与使用（作业2）

    (本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103) 分布式版本控制系统Git的安装与使用 一.安装Git b ...