CSS兼容性

CSS兼容性

就是针对于不同浏览器我们书写不同的样式，从而达到统一的样式效果。
其实，css兼容性，主要针对于ie的旧版浏览器， 因为其他浏览器比较符合w3c规范。

1 属性hack

CSS前缀hack 针对的浏览器
_color:red; IE6 专属
*color IE7 及其以下版本
CSS后缀hack 针对的浏览器
color:red\9; IE6/IE7/IE8/IE9/IE10版本(不包含ie11 以下同样如此)
color:red\0; IE8/IE9/IE10版本
color:red\9\0; IE9/IE10
color:red!important IE7/IE8/IE9/IE10及其其他非ie IE6不支持 !important

2 选择器hack

（1）IE6(含)以下的版本识别
语法： html 选择器 ｛…｝
例如：
html .content { width:300px; height:300px; border:1px dashed #0066FF; }
（2）只有IE7识别
语法：+html 选择器 {….}
例如： +html选择器 { width:300px; height:300px; border:1px dashed #0066FF; }
（3）媒体查询的写法（了解）
@media screen\9{body { background: red; }} 只对IE6/7生效
@media \0screen {body { background: red; }} 只对IE8生效
@media \0screen\,screen\9{body { background: blue; }} 只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

3 条件注释语法

注意： 在ie10.ie11 已经不支持 if ie 这些语句了，只有IE6 7 8 9才支持。
其实ie10以上基本已经和火狐，chrome差不多了，因此不需要单独指定兼容性了。
（1）只有IE6 7 8 9浏览器中可见

<!--[if IE]>
	<p>你在非IE中将看不到我的身影</p>
<![endif]-->

（2）判断等于某个IE浏览器版本的语法
语法：

<!--[if IE 7]>只能被 IE7 识别;<![endif]-->

例如：

<!--[if ie 7]>
    <link rel="stylesheet" type="text/css" href="css/c.css">
<![endif]-->

（3）判断IE浏览器的范围：gte,gt,lte,lt
gte 表示高于或等于某个IE浏览的版本 大于等于
gt 表示高于某个IE浏览器的版本 大于
lte 表示低于或等于某个IE浏览器的版本 小于等于
lt 表示低于某个IE浏览器的版本 小于
语法：

<!--[if gte ie 版本号]>要判断的内容<![endif]-->

例如：

<!--[if gte ie 5]>
    <link rel="stylesheet" type="text/css" href="css/c.css">
<![endif]-->

（4） 判断非IE浏览器 非IE和IE10及以上的版本会显示
语法：

<!--[if ! ie]><!-->要判断的内容<!--<![endif]-->

例如：

<!--[if ! ie]><!-->
    <link rel="stylesheet" type="text/css" href="css/c.css">
<!--<![endif]-->

4 总结兼容性

其实，最好的兼容性还是要写符合标准的代码， 注意前面讲过的特殊属性，比如外边距合并，浮动脱标等等。
非要使用css hack的话，要注意顺序千万不要乱，因为当出现重复定义时，浏览器默认按最后一下渲染，所以一定要先正常，再*，最后_。 （先大后小或者 先全局后局部）

× 请我吃糖~