源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] Firefox和IE通用的三则网站重构实用技巧

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2008-10-17 19:26:33 | 显示全部楼层 |阅读模式
使用zoom、overflow解决IE6、IE7、FF下嵌套容器清除浮动问题   我们经常遇到一个容器外面套一个边框,边框高度随容器高度变化,但是当边框内容器设置了浮动属性后,外框就不跟随变化,这时就需要清除浮动。给外边框容器加上overflow:auto的属性,可以解决IE7和FF下的清 使用zoom、overflow解决IE6、IE7、FF下嵌套容器清除浮动问题
  我们经常遇到一个容器外面套一个边框,边框高度随容器高度变化,但是当边框内容器设置了浮动属性后,外框就不跟随变化,这时就需要清除浮动。给外边框容器加上overflow:auto的属性,可以解决IE7和FF下的清除浮动问题,但是IE6下不生效,我们需要使用IE的一个私有属性zoom使IE5.5 的浏览器达到外框跟随变化的效果。
  需要注意的几个细节问题,例如我们建立一个样式为text的容器,宽200象素,高度自适应,外面包一个样式为content的10象素的外框。(如图1)

Firefox和IE通用的三则网站重构实用技巧_脚本之家jb51.net转载 图1

代码如下:
<styletype="text/css">
.content{border:10pxsolid#F00;}
.text{width:200px;height:300px;background:#000;}
</style>
<bodybgcolor="#FFFFFF">
<divclass="content">
<divclass="text"></div>
</div>
</body>   如果我们为text容器设置了左浮动的属性,并将content容器定义了200象素的宽,就需要为content容器增加overflow:auto属性,以清除text容器的浮动。否则FF下则会出现问题。(如图2)

2008101719124482877802.jpg

2008101719124482877802.jpg
图2
代码如下:
<styletype="text/css">
.content{border:10pxsolid#F00;width:200px;overflow:auto;}
.text{width:200px;height:300px;background:#000;float:left;}
</style>
<bodybgcolor="#FFFFFF">
<divclass="content">
<divclass="text"></div>
</div>
</body>
  除此之外还有一种比较特殊的情况,如果在不设定content宽度的情况下,仅仅使用overflow:auto,在IE5.5 下是无法实现清除浮动的效果的。为此我们需要使用一个IE的私有属性zoom来使IE下达到所需效果。
代码如下:
<styletype="text/css">
.content{border:10pxsolid#F00;overflow:auto;zoom:1;}
.text{width:200px;height:300px;background:#000;float:left;}
</style>
<bodybgcolor="#FFFFFF">
<divclass="content">
<divclass="text"></div>
</div>
</body> 上一页12 下一页 阅读全文
回复

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-3 10:18:17 | 显示全部楼层
可以,看卡巴
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

425

积分

中级会员

Rank: 3Rank: 3

积分
425
发表于 2022-10-10 17:11:27 | 显示全部楼层
dfdsafdsfdsfdsf
回复 支持 反对

使用道具 举报

14

主题

1万

回帖

75

积分

注册会员

Rank: 2

积分
75
发表于 2023-4-25 13:35:53 | 显示全部楼层
那三门,你们谁寂寞才快乐撒
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-29 11:13:58 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

1

主题

1万

回帖

51

积分

注册会员

Rank: 2

积分
51
发表于 2024-3-23 19:44:17 | 显示全部楼层
儿童服务绯闻绯闻绯闻
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

97

积分

注册会员

Rank: 2

积分
97
发表于 2024-4-16 11:42:34 | 显示全部楼层
不错的源码论坛
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

115

积分

注册会员

Rank: 2

积分
115
发表于 2024-4-19 10:42:07 | 显示全部楼层
我找了挺久终于找到了
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-6-21 22:45:58 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

29

主题

2万

回帖

194

积分

注册会员

Rank: 2

积分
194
发表于 2024-8-6 22:42:03 | 显示全部楼层
老大你好你好好你好
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-29 05:33 , Processed in 0.093498 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表