Question

我有一个HTML代码可以简化为：

<body>
    <div class='header'>
    </div>
    <div class='main'>
        <nav class='menu'>
            <a>a</a><a>b</a>
        </nav>
        <div class='content'>Here be dragons!</div>
    </div>
</body>

它使用以下CSS：

html, body
{
    margin: 0;
    padding: 0;
    background-color: #7effad;
}

.header
{
    background-color: black;
    position: relative;
    height: 20px;   
}

.main
{
    position: relative;
}

.main .menu
{
    background-color: white;
}

.main .menu a,
.main .menu a:visited,
.main .menu a:active
{
    display: block;
    float: left;

    background-color: blue;
    border-radius: 2px;
    margin: 5px;
}
.main .menu:after
{
    display: block;
    content: "";
    clear: both;

    height: 0;
    line-height: 0;
    visibility: hidden;
}

.main .content
{
    position: relative;
    padding-top: 12px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 21px;
    margin-right: 21px;
    margin-top: 15px;
    margin-bottom: 0;

    min-height: 1500px;

    background-color: #d4b074;
}

正如您所见here，这会在标题和菜单之间产生某种差距。但是，如果我一起移除内容标签，这个边缘会神奇地消失。

我不明白它是如何改变外观的，因为它是跟随菜单的正常块。

编辑：这个问题只发生在Firefox中，Chromium做的一切都很好。

如果我将margin-top的{{1}}设置为0，问题就会消失;但是，如果.main .content的{{1}}非零，则问题会返回。

跟随另一个的div似乎改变了第一个div的上边距

0 个答案: