div内部块级元素，比如p,div，设置外间距（margin）的话会怎样（IE6正常，此处建立在标准浏览器基础之上，测试环境：FF，Opera）。本来还纳闷div莫名奇妙的怎么多出了一些外边距，甚至设置margin为0，都不能解决问题。到底是怎么回事呢。看示例：
<!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> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div {margin:0;padding:0;}
#top,#bottom {background:red;}
#bottom{background:green;}
p{margin:20px;margin:0;}
#div {margin:30px;margin:0;}
</style>
</head>
<body>
<div id="top">
<p>p-tag margin<p>
</div>
<div id="bottom">
<div id="div">div margin</div>
</div>
</body>
</html>
此代码产生的是一个可以预料到的结果，看截图：
针对css修改一下，看这两句：
/* 此时margin为0，效果OK */
p{margin:20px;margin:0;}
#div {margin:30px;margin:0;}
/* 接下来先去掉p标签的margin:0;让前面的定义生效 */
p{margin:20px;}
#div {margin:30px;margin:0;}
结果呢，效果截图：
有点奇怪，预料中，p-tag为id=top的div的子元素，应该是把top div 撑大才对，top div并没有限制高度啊。
结果就是top div 多出了外边距。那么换#div 去掉margin:0的限制，p加上margin:0；结果还是这样。就是说，不仅仅是p标签会引起这样的问题，故猜测所有的块级元素都会这样的。
当时布局时，FF下就出现了此种现象（但Opera正常。。。），但是没找到什么原因，后来再次次碰到，总算摸到规律了。
既然知道这样会引起问题，那么就可以避免这种布局写法。实在不能避免呢？巧合中，我找到了一种解决方法。
第一次碰到这种现象时，由于不知道原因，很纳闷，firedebug也看不出什么问题，而我有个习惯就是给元素加border看范围。一加border不要紧，居然修正了bug？！但是，这个border怎么办，不是所有的元素需要border的，于是加1px border的同时设置margin:-1px;这样就可以了，另外border的颜色设置和背景一样，防患于未然。
下面就是解决方案（除非你避免这种情况）：
<!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> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
<!--
//-->
</script>
<style type="text/css">
div {margin:0;padding:0;}
/* 这里添加修正代码 border:1px solid #000;margin:-1px*/
#top,#bottom {background:red; border:1px solid #000;margin:-1px;}
#bottom{background:green;}
p{margin:20px;}
#div {margin:30px;margin:0;}
</style>
</head>
<body>
<div id="top">
<p>p-tag margin<p>
</div>
<div id="bottom">
<div id="div">div margin</div>
</div>
</body>
</html>
效果预览：
虽然还有border，但是-1px的margin至少不让宽度和高度增加，加入border颜色和背景一致也看不出来了。
2009年7月20日11:50:01
恼火，终于搜到一个解决方法，奇怪，当初我也是这么加的属性貌似没生效啊，今天却生效了。。。
http://www.women8.cn/Skill/Info.asp?infoid=24,参考资料，不是说的，这种问题的关键词还挺难想，搜出来，偶刚发的这篇还能排的上号。。。。。。
写这篇文章的人还真搞笑，知道解决方法，却不会组合。。。。偶下面组合一下，就全面兼容了：
#top {
overflow:hidden; /* 针对FF，Opera有效 */
zoom:1; /* 对IE有效 */
}
扫一扫
4352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
