海阔天空

手机扫码查看

CSS hack

用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的css效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式

IE检测工具 IEtester

Hack分类
1.css属性前缀法
2.选择器前缀法
3.IE条件注释法

css属性前缀法
属性前缀法是在css样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展示效果
前缀标识，兼容浏览器
_background:red/*ie6*/
+background:red/*ie6,7*/
*background:red/*ie6,7*/
background:red\9/*ie6~9*/
background:red\0/*ie8~11*/

选择器前缀法
是针对一些页面表现不一致或者需要特殊对待的浏览器，在css选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack
*html div{兼容IE6}
*+html div{兼容ie7}
:root div{兼容ie9以及ie9+浏览器}

IE条件注释法
IE浏览器专有的Hack方式，微软官方推荐使用的Hack方式
<!–[if IE]>IE<![endif]–>IE10以上不支持
<!–[if IE 7]>IE7<![endif]–>
<!–[if lte IE]>IE7以下<![endif]–>
<!–[if ! IE 7]>非IE7<![endif]–>

IE低版本BUG
由于浏览器在设计上有很多缺陷，导致一些BUG的产生，所以针对这些问题需要作出兼容处理
常见兼容问题：

1.透明度问题
opacity IE8及以下版本不识别
解决方法
增加filter:alpha(opacity =50)取值范围0-100

2.双边距
盒子左浮动且左外边距，使IE6产生双边距的BUG
解决方法
增加ie的css属性前缀法_display:inline;

3.最小高度
IE6的最小高度BUG，最小高为19px
解决方法
增加overflow:hidden

4.图片边框
IE6~9会让图片增加边框
解决方法img{border:none;}