em宽度的奇怪行为

Question

我目前正在尝试学习自适应/移动网页设计，其涉及针对不同平台和分辨率的媒体查询，在设计中使用em而不是px。我目前正在尝试将两个em-width元素彼此相邻放置;我的内容旁边的导航/信息栏。

我已将信息栏设置为16em宽（根据字体大小转换为16px每个em），并将内容设置为calc（100％ - 17em）宽。我假设这应该在菜单和内容之间留下1em的边距，无论我放大和调整窗口大小，但最终结果不同意：

100％变焦

25％变焦

朋友的屏幕

元素之间的空间通过缩放级别发生了巨大变化，尽管一切都普遍使用'em'单位，并且相关元素之间的字体大小没有变化。可能是什么问题？

信息：我正在使用媒体查询将导航从水平对齐转换为侧边栏。这是查询版本的表现。查看CSS时请记住这一点。它可能是问题的一部分，但我严重怀疑它......

#contentwrap {
    margin-top: 1em;
    border: 1px solid #000;
    border-radius: 8px;    
}

#content {
    border-radius: 8px;
    padding: 2em;

#navbar {
    margin-top: 1em;
    border: 1px solid #000;
    border-radius: 8px;
    width: 100%;
    display: table; 
    font-family: 'Cabin', sans-serif;  
}

.navelement {
    font-size: 0.8em;
    width: 25%;
    padding: 1em;
    text-align: center;
    display: table-cell;
}

#nav4 {
}

@media (min-width:1580px) { 
    #navbar {
        border: 1px dashed red;
        padding: 0px;
        width: 16em;
        float: left;
        background-image: none;
    }

    .navelement {
        font-size: 0.8em;
        background-image: url('../img/navbg.png');
        background-size: 100% 100%; 
        width: 20em;
        display: inherit;
        border: 1px solid;
        border-color: #303030 #101010 #101010 #101010;
        border-radius: 8px;
        margin-bottom: 1.25em;
        padding: 1.25em;
    }

    #nav4 {
        background-image: url('../img/navbg.png');
        background-size: 100% 100%;
        margin-bottom: 0em;
    }

    #contentwrap {
    float: right;
    width: -moz-calc(100% - 17em);
    width: -webkit-calc(100% - 17em);
    width: calc(100% - 17em);
    }
}

HTML代码：

<div id="navbar">
            <div id="nav1" class="navelement"><b>Current news post:</b><br/>"Welcome to usp3!"<br/>by ividyon</div>
            <div id="nav2" class="navelement"><b>Current MOTW:</b><br/>"Some Map"<br/>by some guy</br>[ Link to thread ]</div>
            <div id="nav3" class="navelement"><b>Recent additions:</b><br/>- "Some map" review by Delacroix<br/>- Article: "Blah blah blah.." by ividyon<br/>- "Some other map" review by ividyon</div>
            <div id="nav4" class="navelement">Recent forum posts:</br>- "This design is not good!"<br/>by A Dude</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</br>- "Too lazy to type filler..."<br/>by ividyon</div>
        </div>

        <div id="contentwrap">
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut purus tortor. Maecenas ut semper dui, ac convallis libero. Vivamus molestie mauris a mauris pretium, et dignissim mauris dictum. Vivamus et interdum ipsum, vitae facilisis massa. In auctor convallis feugiat. Nulla sit amet accumsan ipsum. Sed risus felis, sodales ornare nisl a, scelerisque fringilla neque.</p>
            </div>
        </div>

Answer 1

你的#navbar的内容比你给#navbar本身的宽度要宽。

#navbar将是16em + 2px = 258px（字体大小为16px），而内容将是20em + 2.5em + 2px = 290px（字体大小为12.8px）。

由于#navbar有display:table，它自己的宽度会根据子节点的宽度调整自己，而不是让内容溢出边界。表那样做。

因此，其余的calc(100%-17em)没有成功。要么计算一个更小的宽度，要么，因为导航栏还有float:left，你可以完全省去宽度！如果需要，只需设置左边距即可完成。

见Fiddle。