对Div处理 IE6/IE7和Firefox不同之处

时间:2008-10-06 10:52:38  来源:第二电脑网上收集  作者:

  第二电脑网导读:TD/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; }
  正文:

  基本HTML代码

<!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>

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

  当然所有这些情况也许是有合理解释的,说不定增加某一个style的设置。

IE6/IE7和<a href=http://www.002pc.com/s/firefox/ target=_blank class=infotextkey>firefox</a>对Div处理的差异

  下面会在这个基础上进行修改,修改的内容都在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; }

显示结果如下。

显示结果如下,显示结果如下!

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

显示结果如下。: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; }

  这和前面第一种加float:left的情况相同。

显示结果如下。

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

  在这种情况下,Firefox的结果尚能解释,可能是float把外层的Div也作为内层float影响的范围,这样内层的就不会将外层的Div撑大了。IE在这里出现了Margin失效的情况,可以解释为内层第二个float造成了影响。

对Div处理 IE6/IE7和Firefox不同之处》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/2104.html


关键字:

关于《对Div处理 IE6/IE7和Firefox不同之处》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td