CSS hack
2017-10-22 本文已影响0人
squall1744
什么是浏览器兼容问题
同一份代码，有的浏览器效果正常，有的不正常
- 不正常的原因是什么？(不支持? bug？)
- 如何让它展示正常?(条件注释？ 单独Hack？)
CSShack大致有三种表现 形式，CSS属性前缀法，选择器前缀法以及IE条件注释法
1.属性前缀发：例如IE6能识别下划线""和星号"",IE7能识别"",但不能识别下划线"",IE6~10都识别"\9",但firefox前述三个都不能认识。
2.选择器前缀法即选择器hack
3.IE条件注释法:针对所有IE(IE10+已经不支持条件注释)：,针对IE6及以下版本: 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效
常见hack写法
.box{
color: red;
_color: blue; /*IE6*/
*color: pink; /*IE67*/
color: yellow\9; /*ie/edge 6-8*/
}
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
常见属性的兼容情况
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
background-size: >=ie9
圆角: >=ie9
阴影: >=ie9
动画/渐变: >=ie10
常见兼容处理范例
1.兼容IE67的清除浮动
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /*仅针对ie67有效*/
}
2.IE67实现inline-block效果
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
3.针对不同的IE版本导入不同的script等
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
与兼容相关的兼容利器
1.html5shiv
2.respond
3.css reset与Normalize请参考这篇文章：https://segmentfault.com/a/1190000003021766
4.Modernizr请参考Github：https://github.com/Modernizr/Modernizr
