CSS hack
由于不同浏览器对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。此时，我们需要针对不同的浏览器写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果
-
表现形式
- 属性前缀法（类内部Hack）：例如 IE6能识别下划线“”和星号“”，IE7能识别星号“”，但不能识别下划线“”，IE6~IE10都能识别“\9”，但 Firefox 对之前提到的三个都不能识别
- 选择器前缀法（选择器Hack）
- IE条件注释法（HTML条件注释Hack）：
- 针对IE10之前的版本（IE10+不再支持条件注释）
<!--[if IE]>IE浏览器显示的内容 <![endif]--> - IE6及以下
<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
- 针对IE10之前的版本（IE10+不再支持条件注释）
示例
.box{ color: red; _color: blue; /*ie6*/ *color: pink; /*ie7*/ color: yellow\9; /*ie/ed*/ } <!--[if IE 7]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![end if]-->
浏览器兼容的思路
-
要不要做（为什么）
- 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
- 成本的角度（有无必要做某件事）
-
做到什么程度
- 让哪些浏览器支持哪些效果
-
如何做
- 根据兼容需求选择支持哪些技术框架/库（jQuery）
- 根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）
- postCSS
- 条件注释、CSS Hack、js 能力检测做一些修补
常见的需要兼容的属性
-
inline-blockIE8+ -
min-width/min-heightIE8+ -
:before, :afterIE8+ -
div:hoverIE7+ -
background-sizeIE9+ -
border-radiusIE9+ -
box-shadowIE9+ -
动画、渐变IE10+
示例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 仅对IE6 7有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
名词解释
- 条件注释：HTML代码中被IE有条件解释的语句
- IE Hack：使用特定的符号或者方式使得特定的IE浏览器展示特定的效果
- js 能力检测：使用js检测浏览器支持的属性，以便编写样式展示效果
- html5shiv.js IE6~8无法识别HTML5提出的新元素，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式，html5shiv执行createElement方法使css样式应用在未知元素上
- respond.js 可在IE6~8上模拟CSS3的媒体查询Media queries
- css reset 强制重置元素的默认样式，使页面在所有浏览器下效果一致
- normalize.css 强制重置元素默认样式的同时，保护有用的浏览器默认样式、提供一般化的样式、修复浏览器自身的bug、优化CSS可用性、解释代码
- Modernizr 检查浏览器是否支持 CSS3 或者 HTML5 的特性而自动添加一些类名（class）到 <html> ，并替换掉原来的 .no-js
- postCSS 使用JavaScript插件来转换CSS的工具，负责把CSS代码解析成抽象语法树结构（Abstract Syntax Tree,AST）, 再交由插件来进行处理
网友评论