Firefox和IE通用的三则网站重构实用技巧
来源:Arting365.com    作者:金亮    发布时间:2007-11-25

      使用zoom、overflow解决IE6、IE7、FF下嵌套容器清除浮动问题

  我们经常遇到一个容器外面套一个边框,边框高度随容器高度变化,但是当边框内容器设置了浮动属性后,外框就不跟随变化,这时就需要清除浮动。给外边框容器加上overflow:auto的属性,可以解决IE7和FF下的清除浮动问题,但是IE6下不生效,我们需要使用IE的一个私有属性zoom使IE5.5+的浏览器达到外框跟随变化的效果。

  需要注意的几个细节问题,例如我们建立一个样式为text的容器,宽200象素,高度自适应,外面包一个样式为content的10象素的外框。(如图1)

代码如下:
<style type="text/css"> 
.content{ border:10px solid #F00;} 
.text{ width:200px; height:300px; background:#000;} 
</style> 

<body bgcolor="#FFFFFF"> 
<div class="content"> 
    <div class="text"></div> 
</div> 
</body> 

本篇编辑:Iris
发表评论 | 查看所有评论
用户名: 
验证码: