问题
前端进行开发会遇到各种各样兼容性的问题，css/js等等，大家通过查询各种资料来进行解决，真的让人很无奈！浏览器兼容性问题，主要是针对不同浏览器对同一代码的解析不同，导致最后呈现给用户的结果不同。常见浏览器：IE6/IE7/IE… FireFox Chrome Opera Safari 等等；当下主流浏览器兼容性比较统一化，90%都是相同的。自然也就有一些浏览器不是很“称心如意”，比如IE以及版本较低的浏览器，浏览器不兼容的情况频频发生。。。
IE
1、IE6之前定义小高度的容器
#div1{
overflow:hidden;
height:1px;
font-size:0;
line-height:0;
}
原因：默认存在行高，所以无法直接定义
2、IE6之前浮动产生的双边距
#div2{
display:inline
}
原因：浏览器解析时默认解析双倍margin
3、IE6之前模拟min-height效果
#div3{
min-height:100px;
_height:100px;
}
ps：此时#test不能再设置overflow的值为hidden，否则模拟min-height效果将失效
4、IE7之前button随着内容的增多导致两翼空白增加？
input,button{
overflow:visible;
}
5、IE7之前当li中出现多个的浮动时，li之间产生的空白间隙
li{
vertical-align:top;
}
ps：除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的
6、IE6的文本溢出
运行下述例子：
.demo{zoom:1;overflow:hidden;width:500px;}
.div1{float:left;width:100px;}
.div2{float:right;width:400px;}
<div class="demo">
<div class="div1"></div>
<div class="div22">↓这就是多出来的那只猪</div>
</div>
会发现文本溢出了；原因：可能是多重混合的，如浮动，注释，宽高定义等等
解决方案：
* 删除div1和div2之间所有的注释；
* 不设置浮动；
* 调整div1或div2的宽度
7、IE7之前子元素相对定位时父元素overflow属性的auto|hidden失效
例子：
div
{overflow:auto;
width:260px;
height:80px;
border:1px solid #ddd;}
p{position:relative;
margin:0;
}
<div>
<p>哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊啊111</p>
<p>哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈啊啊222</p>
</div>
解决：给div设置相对定位position:relative
8、在FF和IE6图片下方会出现一条间隙
img{verticle-align:center;}
解决：img添加vertical-align属性
Chrome
1、transition时页面闪动
-webkit-transform-style:preserve-3d;或
-webkit-backface-visibility:hidden
使用过度有时会出现闪动的问题
…
2、chrome下默认会将小于12px的文本强制按照12px来解析
-webkit-text-size-adjust: none;
注意：
* 鼠标的手势也有问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer
* 消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px; 其中margin属性对IE有效，padding属性对FireFox有效
* CSS控制透明度问题：**一般就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60)
* a:link{} a:visited{} a:hover{} a:active{} —- love hate
* 标签属性min-height是不兼容的
参考资料：
https://juejin.cn/post/6844904004556685319
https://www.w3cschool.cn/css/
