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,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浏览器
语法:
<!--[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,上博学谷
感谢博学谷老师们强大的技术储备