<nav>违反宽度：可能的解决方案？</nav>

Question

我对<nav>有一种相当奇怪的行为：

我的HTML很简单：

<div class="rounded screen defaultBg">
    <header>
        <img src="/img/logo-temp.png" alt="logo" width="185" height="88"/>
    </header>

    <nav>
        Nav<br/>
        Nav<br/>   <!--Placeholder-->
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav
    </nav>

    <div id="content">
        ...
    </div>
    <footer>...</footer>
</div>

相关的CSS是

nav {
    display:table-cell;
    width:200px;
}

#content {
    display:table-cell;
    width:80%;
}

.rounded {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

.screen {
    padding:3px;
    display:table;
    width:1000px;
    margin:auto;
}
.screen header, .screen footer {
    display:table-row;
    text-align:center;
}

我发现的唯一解决方法是在.screen中指定%宽度，但是，我的布局将特定于多个屏幕尺寸，因此我需要精确的像素值。任何人都可以提供一些有关如何解决此问题的见解吗？

Answer 1

发现由于某种原因，解决此问题的唯一方法是将页眉和页脚放在div class="screen"容器之外。现在看起来像预期的那样。