css - 如何使用 box-sizing : border-box with 2 inline elements?

Question

我正在尝试维护 2 个内联元素，使用边框和填充保持 100% 的宽度，我尝试使用 box-sizing 但没有用。怎么了？ HTML:

<div class="content">
<aside class="left-nav">
<h2>Menu</h2>
</aside>
<section class="section-main">Test</section>
</div>

CSS:

.content {
box-sizing: border-box;
margin-top: 82px;
height: 1000px;
border: solid 2px green;
}
.left-nav {
box-sizing: border-box;
display: inline-block;
width: 20%;
border: 1px solid red;
}
.section-main {
box-sizing: border-box;
display: inline-block;
width: 80%;
border: 1px solid red;
}

JSFiddle: http://jsfiddle.net/W7EJB/

Answer 1

inline-block 元素有问题，将font-size:0; 赋给父元素。像这样写:

.content {
    box-sizing: border-box;
    margin-top: 82px;
    height: 1000px;
    border: solid 2px green;
    font-size:0;
}
.left-nav {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: inline-block;
    width: 20%;
    border: 1px solid red;
    font-size:16px;
}
.section-main {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: inline-block;
    width: 80%;
    border: 1px solid red;
    font-size:16px;
}

检查这个http://jsfiddle.net/W7EJB/1/