一、CSS Hack
标准模式和混杂模式
- IE6之前，不同浏览器间没有兼容性可言
- IE6之后浏览器厂家间开始寻求标准统一，但仍允许向前兼容，于是产生了不同的运行模式
- 浏览器运行模式可以分为:
- 混杂模式 (Quirks Mode)
- 标准模式 (Standard Mode)
- 准标准模式 (Almost Standard Mode)
- 不同模式下，浏览器对CSS(尤其是盒模型)和JS解析效果会产生不同
- 其他浏览器会根据DOCTYPE自动进行模式选择，IE除此之外还可以手动选择运行模式
- 触发混杂模式
- 不声明DOCTYPE
- 触发准标准模式（遵循标准，仍兼容部分非标准代码）
- <!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
- <!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- 触发标准模式(遵循标准，不允许使用非标准代码)
- <!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
- <!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <!-- HTML 5 -->
<!DOCTYPE html>
CSS Hack 概念
- 浏览器的类型及版本的不同会造成 CSS 效果不尽相同
- 不同厂商的浏览器，比如 IE、Safari、FireFox、Chrome、Opera等
- 同一厂商的浏览器的不同版本，比如IE6、IE7
- 需要针对不同的浏览器编写不同的 CSS
- 实现浏览器兼容
- 也可以为不同版本的浏览器定制编写不同的 CSS 效果
浏览器兼容性
- 根据不同的浏览器对 CSS 的支持及解析结果
- margin 和 padding
- 居中布局
- IE 低版本中，对于父元素用 text-align:center;
- 其他，子元素需用 margin: 0 auto;
- 元素高度与内容
- IE 低版本中，元素的高度至少包含内容
- 其他，内容超出高度，则显示
- 子元素设置上外边距时，父元素需要设置边框或者外边距
- HTML
- CSS
- 显示结果
- 其他浏览器
- 设置父元素的边框(可以设置为透明)
- 或者设置父元素的内边距,替代子元素的外边框
CSS Hack 原理
- 主要有
- CSS 类内部 Hack
- 选择器 Hack
- HTML 头部引用 Hack
CSS 类内部 Hack
- 属性前缀
- 在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀
选择器Hack
- 选择器前缀
- 在 CSS 选择器前加上一些只有某些特定浏览器才能识别的前缀
- *前缀: IE6,比如 *html
- *+前缀: IE7,比如 *+html
- @media screen\9{...},只对IE6/7生效
- ...
HTML 头部引用 Hack
- 即 IE 条件注释
- 条件注释的基本结构和 HTML的注释(<!-->)相同
- IE 根据 if 条件来判断是否解析条件注释里的内容
- gt : greater than , 选择条件版本以上版本，不包含条件版本
- lt : less than,选择条件版本以下版本，不包含条件版本
- gte: greater than or equal,选择条件版本以上的版本，包含条件版本
- lte: less than or equal, 选择条件版本以下版本，包含条件版本
- !: 选择条件版本以外所有版本，无论高低
- 只在 IE 下生效
- <!--[if IE]> 这段文字只在 IE 浏览器显示 <![endif]-->
- 只在 IE6 下生效
- <!--[if IE 6]> 这段文字只在IE6 浏览器显示<![endif]-->
- 只在 IE6 以上版本生效
- <!--[if IE gte 6]> 这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->
- 只在 IE8 上不生效
- <!--[if ！IE 8]> 这段文字在非IE8浏览器显示 <![endif]-->
- 非 IE 浏览器生效
- <!--[if !IE]> 这段文字只在非IE浏览器显示 <![endif]-->
总结：本章内容主要介绍了 Css Hack