首页 > 代码库 > 浏览器兼容

浏览器兼容

  • 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;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。

浏览器兼容