为啥火狐中margin-top不起作用，而容器div添加border属性后才起作用

为什么火狐中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集成进来了。
[解决办法]
空白边叠加

查看更多 下一篇