在面试的时候，常常会被问到，浏览器的兼容性有哪些？原因，解决办法是怎么，常用hack的技巧 ？

不同浏览器都会带有自己的浏览器默认样式，一般我们需要把它们浏览器默认自带的形状给清楚，一般我们通过reset.css(我们企业里开发前端界面都用这个来清楚浏览器默认样式)

display:inline-block(IE7及以上不支持)

需要对低版本IE特殊处理：{display:inline-block;*display:inline;*zoom:1;}

display:inline-block 什么时候会表明间隙？怎样去除间隙？

父元素font-size设置成，子元素再次设置font-size

display:inline-block滥用容易出现布局方面的难题，特别在左中右、左右等布局方面的难题尤为突出。因此即使是左右布局的话，尽量都用浮动来替代

z-index

z-index在IE7及以上版本的话，有时会发现不是谁z-index设置的越高谁就表明在最下面。碰到这样难题需要增设父元素有相对定位属性元素的z-index。先比较父元素的z-index再比较子元素的

IE6双边距

IE6中，元素向左浮动并且增设了右边的外边距出现了这么的双边距bug。同理，元素向右浮动并且增设右边距也会出现同样的现象。同一行或者有多个浮动元素，第一个浮动元素会出现这个双边距bug各种浏览器兼容问题，其他的浮动元素则不会。只需要给浮动元素加上display:inline;这样的CSS属性就可以了。

margin-top，margin-bottom的bug

父元素的第一个子元素设置了margin-top,会作用于父元素(值为父元素的margin-top与该margin-top两者中的最大值)，而子元素和父元素的列宽则没有发生改变。

IE8-(IE8及以上)rgba模式不兼容的解决方案

IE8以及以上用调色， filter:Alpha(opacity=20);

CSS Hack

怎么是CSS hack

由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等)，对CSS的支持、解析不一样，使得在不同浏览器的环境中展现出不一致的界面展现作用。这时，我们为了获得统一的界面效果，就需要针对不同的浏览器或不同版本写特殊的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，就叫CSS hack!

CSS hack的方法

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，还有CSS优先级对浏览器展现作用的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS hack分类

科普

lte：就是Less than or equal to的简写，也就是小于或等于的含义。

lt ：就是Less than的简写，也就是小于的含义。

gte：就是Greater than or equal to的简写，也就是大于或等于的含义。

gt ：就是Greater than的简写，也就是大于的含义。

! ：就是不等于的含义，跟javascript里的不等于判断符相同

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法还有IE条件注释法(即HTML头部引用if IE)Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差别而引入的。

特性前缀法(即类外部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识.

.all IE{property:value\9;} .gte IE 8{property:value\0;} .lte IE 7{*property:value;} .IE 8/9{property:value\0;} .IE 9{property:value\9\0;} .IE 7{+property:value;} .IE 6{_property:value;} .not IE{property//:value;}

选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}如果*:first-child+html .class{}。

IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：各种浏览器兼容问题，针对IE6及以上版本： 。这类Hack不仅对CSS生效，对写在判断句式里面的一切源码就会生效。

本文来自电脑杂谈，转载请注明本文网址：

http://www.pc-fly.com/a/jisuanjixue/article-118629-1.html