IE6/IE7和Firefox对Div处理的差异

来源:网络收集 作者:土八路 阅读: 字体:[ ] [打印] [关闭]
自定义标签 wzsp 未创建

内容提要:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head titleDiv Float Sample/title style type= ……

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Div Float Sample</title>

<style type="text/css">

div { margin:3px; }

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; }

.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }

</style>

</head>

<body>

<div class="d1">

<div class="d2">&nbsp;</div>

<div class="d3">&nbsp;</div>

</div>

</body>

</html>

以上代码显示的结果如下,很正常,结果相同。

div, xhtml, firefox, ie6,ie7

下面会在这个基础上进行修改,修改的内容都在style中,其他代码就不再重复写了。

请注意,这里的Style中用到了min-height,这个和height是不同的,min-height指定了对象的一个最小高度,当对象的子内容高度超过这个最小高度是,这个对象会自动撑大。这是一个非常牛的style,可惜的是,在这个style和float这个同样牛的style一起使用的时候,就会出现各种问题。

内部一个Div修改成为float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }

.d3 { width:100px; min-height:40px; border:1px solid #cc0000; }

显示结果如下。

div,float:left

这个结果中,Firefox有点离谱了,两个框叠在一起也就罢了,为什么那个红框会变大捏?而且变的大小也很诡异,不知道是按照什么公式计算出来的。IE在这里的显示应当是附和标准的。

内部两个Div都修改成为float:left

.d1 { width:250px; min-height:20px; border:1px solid #00cc00; }

.d2 { width:130px; min-height:40px; border:1px solid #0000cc; float: left; }

.d3 { width:100px; min-height:40px; border:1px solid #cc0000; float: left; }

显示结果如下。

内部两个Div都修改成为float:left

在这种情况下,Firefox的结果尚能解释,可能是float把外层的Div也作

12下一页
[标签: IE6/IE7和Firefox对Div处理的差异] [打印] [关闭]
站长评论(0) 查看所有评论
相关新闻

热门新闻

推荐新闻