常见的几个浏览器兼容问题

所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显示效果不统一的情况。

兼容问题一：块属性标签float后，⼜有横⾏的margin情况下，在IE6显⽰margin比设置的⼤

出现问题：IE6中后面的⼀块被顶到下一⾏

解决⽅案：在float的标签样式控制中加入 display:inline;将其转化为⾏内属性

 

兼容问题二：⾏内属性标签，设置display:block后采用float布局，又有横⾏的margin的情况，IE6间距bug
出现问题：IE6⾥的间距比超过设置的间距
解决方案：在display:block;后面加入display:inline;display:table;

兼容问题三：⼦元素绑架父元素的margin-top
出现问题：这个问题主要出现在非IE浏览器中。如果子元素和⽗元素之间没有任何内容，将⼦元素设置margin-top后，⼦
元素不会动，⽽⽗元素会因为margin-top往下移动。
解决方案：在⽗元素和子元素之间加入<div stye=‘height:0’>&nbsp;</div>。或者设置父元素的padding-top。

兼容问题四：标签最低高度设置min-height不兼容
出现问题：因为min-height本身就是⼀个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
解决方案：如果我们要设置⼀个标签的最⼩高度200px，需要进行的设置为：{min-height:200px; height:auto !important;
height:200px; overflow:visible;}
备注：当内容小于一个值（如300px）时。容器的高度为300px；
当内容⾼度⼤于这个值时，容器高度被撑高，⽽不是出现滚动条。这时候我们就会面临这个兼容性问题。

转载于:https://www.cnblogs.com/yin-yi/p/4679031.html