兼容性
CSS中兼容性问题
- 浏览器不支持该属性
- 某些特定条件下触发浏览器 bug
支持情况
- caniuse.com
- MDN CSS Reference
- Codrops CSS Reference
- QuirksMode.org CSS
兼容到哪里
- 根据用户群体决定
- 面向普通用户：IE8+ 、Chrome、Firefox
- 企业级产品：IE9+、Chrome、Firefox
- 了解浏览器市场份额
- 日志分析
- 百度统计
- NetMarketShare
浏览器不支持怎么办
低版本没有这些特性是否可接受
- border-radius 不支持时，没有圆角
- box-shadow 不支持时，没有阴影
使用效果偏差一些的替代方案
- min-height: 100vh, 用 min-height: 800px
使用一些替代方案
- opaciy: 0.5 在 IE下用 filter: alpha(opacity=50)
使用JavaScript支持
- 使用 html5shim.js 让 IE6～8 支持新标签
- 使用 DD_belatedPNG.js 让 IE6 支持半透明 png 图片
解决方案
垫片 CSS Polyfills
- selectivizr
- CSS3 PIE
- box-sizing-polyfill
- flexibility
- cssSandpaper
@supports
.container{
display: flex;
}
@supports (display: grid) {
.container {
display: grid;
grid-template: repeat(4, 1fr) / 50px 100px;
}
}
成叠
同一个属性，后面写的值会覆盖前面书写的规则
p {
line-height: 2;
line-height: 3;
}
对无效的属性值会被忽略
p {
display: table;
display: flex;
}
条件注释
<!-- [if IE 7] >
<p>只能在 IE 7 浏览器下看到我。</p>
<![endif] -->
<!-- [if lt IE 8] >
<p>只能在小于 IE 8 下的浏览器看到我。</p>
<![endif] -->
浏览器怪癖
.tip{
background: blue; //chrome
background: red\9; // IE8
*background: black; // IE 7
_background: orange: // IE 6
}
IE6 不支持两个选择器直接组合，会直接把内容交付于后面的元素，可以使用以下方法生成样式仅在 IE 6 生效。
.unused-class.selector{
/* IE 6 only CSS *?
}
只有IE6 会忽略_ , 可以使用以下方法在 IE6 中生效
.container{
height: 100px;
/* 只有IE6 会忽略_ */
_height: 200px;
}
只有 IE6 和 7 会忽略 * ，因此以下 *height: 200px;可以在 IE6 和 IE7 生效
.container{
height: 100px;
*height: 200px;
}
IE6-8 不支持 :root 选择器
:root .selector{
/* IE6-8 Style */
}
IE6-8 会忽略\9
.selector{
color: #fff;
color: #333\9;
}
CSS2 选择器兼容性
主要兼容性问题在 IE6-7 上
- IE6 不支持多个类直接组合
p.class-a.class-b 被当成 p.class-b ，解决办法：处理好选择器优先级
- IE6 不支持父子、兄弟选择器
E > F、E + F 和 E ~ F 选择器无效，解决办法：避免使用
- IE6 不支持属性选择器
任何一种都不支持，解决办法：用class
- IE6 ~ 7 不支持伪元素
不支持:before 和 :after ，解决办法：改变实现方式，或在 HTML 中添加标签
- IE6 不支持某些伪类
非链接不能使用:hover、:active ，解决办法：使用 a 嵌套需要hover的元素
- IE6-7 不支持 :focus 伪类
解决办法：使用 JavaScript
- IE6 不支持:first-child 伪类
解决办法：给第一个子元素添加 class="first"
CSS3 选择器兼容性
CSS3中大部分选择器，兼容性是 IE9+ ，例如:target、:empty、:nth-child、:nth-of-type、:checked、:disabled 无法在 IE6-8 中使用，移动端支持绝大多数 CSS3 选择器
CSS2 属性
问题主要集中在IE6上，一小部分 IE7 也不支持
- IE6 不支持 min/max-width/height，解决办法
div{
min-height: 500px;
_height: 500px;
}
- IE6 不支持 positon:fixed 属性 ，解决办法
html, body{
height: 100%;
}
.go-top {
position: fixed;
_position: absolute;
bottom: 0;
right: 0;
}
- IE6-7 不支持块级元素 inline-block
行级元素支持，而块级元素不支持，解决办法
.selector{
display: inline-block;
*display: inline;
*zoom: 1;
}
- IE6-7 不支持 display:table
请使用float或者 inline-block 布局，不要使用 table 布局
CSS3 属性
- IE6-7 不支持
- IE 8 部分支持
- IE 9 基本都支持
IE8 支持
- box-sizing
- outline
IE8 不支持
- background-size
- border-radius
- box-shadow
- opacity
- rgba、hsl、hsla
- rem、vh、vw、calc
IE9 不支持
- transition
- animation
media query
- 基本的媒体(all/print/screen/speech)都支持
- 媒体属性（width/height/orientation...) IE9 以上
浏览器前缀
浏览器厂商为了实验新特性，在属性名前加前缀
- Chrome/Safari/Opera：-webkit-
- Microsoft: -ms-
- Mozilla: -moz-
遇到假前缀的情况，我们需要把标准的写法写在后面
.example{
-webkit-transform: translate(100px, 0);
-ms-transform: translate(100px, 0);
transform: translate(100px, 0);
-webkit-transition : -webkit-transform .5s ease;
-ms-transition : -ms-transform .5s ease;
transition : transform .5s ease;
}
语义化的 HTML5 标签
<style>
article, main, nav, aside, section, header, footer, figure, figcaption {
display: block;
}
</style>
<!--[if lte IE 8 ]>
<script src="html5shiv.js"></script>
<! [endif] -->
(function(){
var tags = "abbr,article...".split(/,\s*/);
var i = tags.length;
white(i -- ){
document.createElement(tags[i])
}
})()
浏览器 bug
IE 6 下半透明 png 显示不正确
IE 6 浮动双边距，浮动元素于浮动同方向的边距加倍
IE 模式
- 浏览器模式
- 切换渲染引擎、JavaScript引擎和 HTTP 请求的 UserAgent
- 兼容模式相当于使用 IE7 引擎。
- 文本模式
- 切换文档模式，及渲染引擎和JavaScript引擎
如何控制IE模式（ <=10 )
<meta http-equiv="X-UA-Compatible" content="IE=edge"> //使用IE7引擎
<meta http-equiv="X-UA-Compatible" content="IE=edge"> //使用最新引擎
测试兼容性
- 虚拟机测试
- BrowserStack