探索设计与体验的融合
Fusion design exploration and experience
黄埔新闻动态
News
好的黄埔网络营销公司会给客户提出建设性的意见,善于对客户进行良性引导
您的位置:>> 黄埔网站首页 >> 技术文章
黄埔又是一个兼容性的问题:IE和Firefox下解决自适应高度的问题

    在ie,firefox下,要想实现div高度自适应,必须考虑浏览器兼容问题。因为在firefox中有min-height这个属性来设置div容器的最小高度,当实际高度超过min-height时,firefox会自动适应,但是遗憾的是ie不支持这个属性。

    另一方面,ie的height其实就等同与firefox的min-height属性,而且如果不去设置ie的height,它也会很好的自适应高度,而firefox就没有这个特点。

总结一下各种解决方案:

方法1,利用!important

代码:

min-height:100px;
height:auto !important;
height:100px;
overflow:visible;

这是兼容ie6,ie7,firefox的方法,不仅解决了高度自适应,还可以设置最小高度。

方法2,ie的height有自动适应高度的能力,而firefox在设置height后没有自适应能力,但是经过测试,如果firefox既不设置height,也不设置min-height,竟然也能够自适应。例外的情况是div内部元素有浮动,就不会自适应了。

方法3:为解决方法2中浮动的问题,有3种方法:

    1,在div内部所有元素之后加一个clear:both;的元素,可以是div,也可以使ul。

    2,给div加上overflow:auto;样式。

    3,javascript:document.getElementByIdx_x("wai-div").style.height=document.getElementByIdx_x("nei-div").scrollHeight+20+"px" 。这个办法的局限性是,当内部元素多的时候,就变得麻烦了。

    不管你用什么方法,能解决页面兼容性的问题就是好方法,在网站建设中,不断积累细微的经验,才能不断进步。

相关链接>>
您对此文有什么评论?
类型: 意见建议 内容报错
网友对此文的评论:
未有评论!