css margin
发布网友
发布时间：2022-04-06 10:44
我来回答
共4个回答
热心网友
时间：2022-04-06 12:14
CSS:
#header,#footer{border:solid 1px #FF0033;height:20px;}
#main{padding:1px;margin:10px;border:solid 1px #F03;height:1%;}
#content{margin:200px;width:50px;border:solid 1px #F03;background:#C69;}
XHTML:
<div id="header"></div>
<div id="main" onclick="alert(this.currentStyle.hasLayout)">
<div id="content">ttttt</div>
</div>
<div id="footer"></div>
OK,我来解释一下，这个问题涉及到CSS的两个话题：“空白边叠加”和“IE拥有布局”。
首先，你应该已经对“空白边叠加“这个问题有所了解，如果不然，则你可以此为关键字在网上搜索一下，这个问题非常普遍，所以我就不再这里复制粘贴了，
下面说说导致问题的原因：
在IE中,"拥有布局的元素之间空白边不叠加"，
当main的样式为：
#main{padding:1px;margin:10px;border:solid 1px #F03;}
这时候 <div id="main" onclick="alert(this.currentStyle.hasLayout)">
通过JS探测到此时的main元素没有“拥有布局”,所以"空白边叠加"了，
为了使main元素"拥有布局"，将main的样式设置为：
#main{padding:1px;margin:10px;border:solid 1px #F03;height:1%;}
（实际应该为：
#main{padding:1px;margin:10px;border:solid 1px #F03;}
/* IE5-MAC 隐藏\*/
* html #main{height:1%;}
/* 不在 IE5-MAC中隐藏 */
）
即为元素设置任意高度（其他方法请搜索之）使其”拥有布局“，问题便解决了。IE的”拥有布局“会导致很多问题，所以你可以深入了解下这个问题，以便在以后遇到类似的问题轻松解决。
热心网友
时间：2022-04-06 13:32
buffer 2009-4-17 14:14:37
<div style = "border:solid 1px #FF0033;height:20px;"></div>
<div style = "border:solid 1px #FF0033; padding:1px; margin:10px; overflow: visible;height:auto!important; height:1%;">
<div id = "test" onclick = "test()" style = "border:solid 1px #FF0033; margin:200px; background-color:#CC6699; clear: both; width: 50px;">ttttt</div>
</div>
<div style = "border:solid 1px #FF0033;height:20px;"></div>
buffer 2009-4-17 14:18:15
IE6 7 下margin属性 padding 等与FireFox效果不大一致 用的时候慎用
buffer 2009-4-17 14:18:54
通过给第二个div 设置高度 height:auto!important; height:1%; 可以达到相同效果
热心网友
时间：2022-04-06 15:06
ie的盒子高度用Body计算。推荐看看CSS专业书籍——你的问题上面都有了。
热心网友
时间：2022-04-06 16:58
内联样式表,优先级别最高的样式表.
