为啥火狐中margin-top不起作用，而容器div添加border属性后才起作用-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20673 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>