为什么火狐中margin-top不起作用,而容器div添加border属性后才起作用?
在火狐下,表格上设置了margin-top:20,不起作用,仍然是顶部对齐(IE下可以)
- HTML code
<div style="padding-right:10px;"><div style="height:40px;padding-left:10px;background:#ff0;"> <TABLE cellpadding="0" cellspacing="0" style="width:100%;border:1px solid red;margin-top:20px" class="menubar"> <TR> <td> <A HREF="module.main" target="_self" title=""><span>链接</span></A></td> <td> <A HREF="module.main" target="_self" title=""><span>链接</span></A></td> <td> <A HREF="module.main" target="_self" title=""><span>链接</span></A></td> <td> <A HREF="module.main" target="_self" title=""><span>链接</span></A></td> <td> </TR> </TABLE></div></div>
奇怪的是,在div中添加border属性后,火狐下margin-top又起作用了,什么原因?怎么才能在不设置border情况下使table的margin-top起作用?
- HTML code
<div style="padding-right:10px;"><div style="height:40px;padding-left:10px;background:#ff0;border:1px solid blue"> <TABLE cellpadding="0" cellspacing="0" style="width:100%;border:1px solid red;margin-top:20px" class="menubar"> <TR> <td> <A HREF="module.main" target="_self" title=""><span>链接</span></A></td> <td> <A HREF="module.main" target="_self" title=""><span>链接</span></A></td> <td> <A HREF="module.main" target="_self" title=""><span>链接</span></A></td> <td> <A HREF="module.main" target="_self" title=""><span>链接</span></A></td> <td> </TR> </TABLE></div></div>
[解决办法]
原因解释
http://www.jb51.net/article/16357.htm
http://www.cnblogs.com/litao229/archive/2009/06/04/1496477.html
[解决办法]
在table上面那个DIV中加入overflow:hidden;方可解决问题!!!
[解决办法]
原因:应该是你内层的table没有得到layout这个属性:只有设置比如position:absolute;overflow:hidden;这些方可触发layout属性,但是layout属性传说中是在IE中私有的,可能被ff集成进来了。
[解决办法]
空白边叠加