常见的几个浏览器兼容问题
所谓的浏览器兼容性问题,是指因为不同的浏览器对同⼀段代码有不同的解析,造成页⾯显示效果不统一的情况。
兼容问题一:块属性标签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’> </div>。或者设置父元素的padding-top。
兼容问题四:标签最低高度设置min-height不兼容
出现问题:因为min-height本身就是⼀个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
解决方案:如果我们要设置⼀个标签的最⼩高度200px,需要进行的设置为:{min-height:200px; height:auto !important;
height:200px; overflow:visible;}
备注:当内容小于一个值(如300px)时。容器的高度为300px;
当内容⾼度⼤于这个值时,容器高度被撑高,⽽不是出现滚动条。这时候我们就会面临这个兼容性问题。