博学谷前端 css兼容性简单总结

1. CSS兼容性

在网络中浏览器众多，因为不同浏览器使用内核及对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同。以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱，错位。目前暂没有统一的能解决这样的工具.

最普遍的解决办法就是不断的在各浏览器间调试网页显示效果，通过对CSS样式控制以及通过脚本判断并赋予不同浏览器的解析标准。

总结：所以为css兼容性，就是针对于不同浏览器我们书写不同的样式，从而达到统一的样式效果。

其实，css兼容性，主要针对于ie的旧版浏览器，因为其他浏览器比较符合w3c规范。

2.1 属性hack

2.2 选择器hack

（1）IE6(含)以下的版本识别语法：* html 选择器 ｛...｝例如：html .content { width:300px; height:300px; border:1px dashed #0066FF;
}
（2）只有IE7识别语法：*+html 选择器 {....}例如：*+html .content { 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有效

2.3 条件注释语法

注意：在ie10.ie11 已经不支持 if ie 这些语句了，其实ie10以上基本已经和ff，chrome差不多了，因此不需要单独指定兼容性了。

（1）只有IE浏览器中可见<!--[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,ltgte 表示高于或等于某个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浏览器语法：<!--[if ! ie]><!-->要判断的内容<!--<![endif]-->
例如：<!--[if ! ie]><!--><link rel="stylesheet" type="text/css" href="css/c.css"><!--<![endif]-->

2.4 检测是否了解兼容性

（1）以下代码兼容 ie6.7.8.谷歌浏览器各自显示的颜色

#tip {background:blue;background:red \9;*background:black;_background:orange;}

答案：

background:blue; chrome 背景变蓝色background:red \9; IE8 背景变红色*background:black; IE7 背景变黑色_background:orange; IE6 背景变橘色

2.5 总结兼容性

其实，最好的兼容性还是要写符合标准的代码，注意前面讲过的特殊属性，比如外边距合并，浮动脱标等等。

非要使用css hack的话，要注意顺序千万不要乱，因为当出现重复定义时，浏览器默认按最后一下渲染，所以一定要先正常，再*，最后_。（先大后小或者先全局后局部）

学IT，上博学谷
感谢博学谷老师们强大的技术储备