登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

zczhangchi 的博客

学习笔记

 
 
 

日志

 
 

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

2010-01-13 11:57:32|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

我们知道,如果子层用了浮动,那就必须清除浮动(clear:both),父层才能完全嵌套子层。

下面是我看到的一篇文章,他是不用clear,而是用overflow来清除浮动,这样就少了一个div来清除浮动。

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

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

代码如下:

以下是引用片段:
<style type="text/css">
.content{ border:10px solid #F00;}
.text{ width:200px; height:300px; background:#000;}
</style>

<body bgcolor="#FFFFFF">
<div
     <div
</div>
</body>

如果我们为text容器设置了左浮动的属性,并将content容器定义了200象素的宽,就需要为content容器增加overflow:auto属性,以清除text容器的浮动。否则FF下则会出现问题。

代码如下:

以下是引用片段:
<style type="text/css">
.content{ border:10px solid #F00; width:200px; overflow:auto;}
.text{ width:200px; height:300px; background:#000; float:left;}
</style>

<body bgcolor="#FFFFFF">
<div
     <div
</div>
</body>

除此之外还有一种比较特殊的情况,如果在不设定content宽度的情况下,仅仅使用overflow:auto,在IE5.5+下是无法实现清除浮动的效果的。为此我们需要使用一个IE的私有属性zoom来使IE下达到所需效果。

代码如下:

以下是引用片段:
<style type="text/css">
.content{ border:10px solid #F00; overflow:auto; zoom:1;}
.text{ width:200px; height:300px; background:#000; float:left;}
</style>

<body bgcolor="#FFFFFF">
<div
     <div
</div>
</body>

使用列表实现图片排版自动更新排列


  在制作图片站点的时候,经常会用到图片排版,并且最新更新的图片显示在最前面,后面依次类推。使用表格可以实现这样的效果,但是略显复杂,下面分享一下我使用列表完成的效果。

代码如下:
以下是引用片段:
<style type="text/css">
ul{ margin:0; padding:0 0 20px 0; list-style:none; width:380px; overflow:auto; background:#959595;}
ul li{ float:left; display:inline; width:100px; height:80px; background:#F00; margin:20px 0 0 20px;}
</style>

<body bgcolor="#FFFFFF">
<ul>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
</ul>
</body>


  这样只要每次增加一行列表,就可以完成图片的自动更新排版。这里需要大家注意两点:

  一、和第一个例子讲的一样,<li>使用了浮动属性,所以<ul>需要使用overflow:auto来清除浮动;

  二、示例代码中对<li>使用了display:inline属性,是为了解决IE6下左浮动双倍边距的bug,这个小技巧希望朋友们注意。

  注:以上示例在IE6、IE7、FireFox浏览器下测试通过。


本文来自CSDN博客,转载处:http://blog.csdn.net/xiongyuefei/archive/2008/10/17/3093033.aspx

  评论这张
 
阅读(370)| 评论(0)

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018