`
zhangyaochun
  • 浏览: 2612885 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

空白边叠加引发的思考--ff和ie在解析div高度的时候的差异

IE面试FirefoxCSS浏览器 
阅读更多

  最近老大面试中遇到了一个问题：

 

 

<h2>在IE6,FF container的高度是多少</h2>

<div id="container" class="" style="padding:20px;border:solid 5px #ccc;" >

 <div id="" class=""  style="margin:15px;border:solid 5px #000; height:30px;" >

  abc 

 </div>

</div>

 

 

在火狐里面的盒模型图如下：


然而在IE8的盒模型图如下：


 

 

这边我们再来看一下下面那例子：

我在页面定义两个div，分别加上各自的样式（主要两个样式之间小小的区别）

 

<html>

<head>

<title></title>

<style>

.t1 {height:3px;background-color:green;font-size:10px}

 

.t2 {height:3px;background-color:green;overflow:hidden;font-size:0px}

</style>

</head>

 

<body>

<div class="t1"></div>

 

<br>

<br>

<div class="t2"></div>

</body>

</html>

最后在测试IE8的效果图：

 


 

在火狐的效果图：



 可能有的人会说我没有在div里面写上一些文字内容，但是如果你自己测试一下的话发现渲染的div的高度还是一样的。这边IE会默认div的高度为一个字体显示的高度，所以它会撑开。

 

 

----所以在IE和Firefox下解析div的高度的时候还是有区别的。

IE:根据div的内容的高度去动态地变化，当然如果内容超过设置的高度时，也会根据实际的高度。

FF：当内容超过了设置的高度时，内容会超出，但是div使用的样式还是不会变化的。

 

 

当然如果你看过《精通CSS高级Web标准解决方案》的话，里面有一段是讲述空白边叠加的，


 


                        -----------------我喜欢抓起浏览器的差异，然后去做测试研究，查看资料，如果有什么错的希望指正。

  • 大小: 2.9 KB
  • 大小: 4.6 KB
  • 大小: 378 Bytes
  • 大小: 458 Bytes
  • 大小: 65.9 KB
分享到：
| 最近看的一篇文章-学习转载一下（页面html ...
评论
1 楼 小丑鱼0703 2012-03-31  
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics