浏览器兼容
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器兼容相关的知识,希望对你有一定的参考价值。
- 1、table兼容
问题:对table设置height值,tr未设置height,在IE中tr会自动填充table的高度
解决方法:在table标签外面用div包裹设置div的高度;或者对tr设置高度
- 2、li间距去除
若对li设置display:inline-block或display:inline,li之间有默认的行间距,取消间距的最快捷方法是对ul设置font-size:0;
- 3、float左右布局
块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大
问题症状:常见症状是ie6中后面的一块被顶到下一行
碰到频率:90%(稍微复杂点的页面都会碰到,float布局最常见的浏览器兼容问题)
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注:我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。
- 4、标签最低高度设置min-height不兼容
因为min-height本身就是一个不兼容的css属性,所以设置min-height时不能很好的被各个浏览器兼容
碰到几率:5%
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注:在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。
以上是关于浏览器兼容的主要内容,如果未能解决你的问题,请参考以下文章