0

我有一个相当奇怪的行为<nav>显示宽度为 1000 像素,而我将其设置为 200 像素

我的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宽度%,但是,我的布局将特定于几个屏幕尺寸,因此我需要一个精确的像素值。谁能提供一些有关如何解决此问题的见解?

4

1 回答 1

0

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

于 2012-11-24T22:33:17.380 回答