css - 使用 box-sizing : border-box 在布局中仍然缺少 2px

Question

概要

我有一个 wrapper ，宽度为 980 像素，内边距为 10 倍。里面的内容是960px(border-box)。我有一个元素，inline-block，宽度为 760px，margin-right 20px，另一个 inline-block 为 180px。这些应该完美匹配。但仅从其中一个元素中减去两个 px 将使它们适合父元素。

我知道行内 block 的空白问题并一直使用该修复程序。即便如此，我还是用float测试了两个block，还是同样的问题。

CSS

* { padding: 0; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
.wrapper { width: 980px; margin: 0 auto 20px; padding: 10px; border: 1px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.featured_blog { width: 760px; height: 240px; padding: 10px; margin: 0 20px 20px 0; border: 1px solid #000; /*display: inline-block; *display: inline; zoom: 1;*/ display: block; float: left; vertical-align: top; overflow: hidden; text-overflow: ellipsis; }
.featured_author { width: 180px; height: 240px; border: 1px solid #000; /*display: inline-block; *display: inline; zoom: 1;*/ display: block; float: left; vertical-align: top; }

HTML

<section class="wrapper">
    <div class="featured_blog">
        <h2><span>Some Kind of Blog Title</span></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo orci, dictum id venenatis at, mattis nec enim. Maecenas vel molestie dolor. Maecenas mauris massa, congue at rhoncus et, dapibus sit amet eros. Nunc ipsum felis, eleifend in laoreet sit amet, tincidunt feugiat velit. Cras eu felis tortor, sed accumsan nisl. Ut volutpat viverra justo, quis consectetur felis tempor a. Etiam magna eros, euismod vel viverra in, facilisis sed libero. Vivamus in neque quis turpis adipiscing scelerisque dapibus at diam. Sed magna magna, ultrices quis posuere vel, pulvinar sodales dolor. Proin sapien sapien, adipiscing quis ultrices eget, cursus vitae enim. Maecenas ornare, erat non porta porta, sem felis condimentum erat, a lacinia nunc nisl a est.</p>
    </div><div class="featured_author"></div>
</section>

这两个px哪里来的？？？!!!!!

Answer 1

2px 来自border: 1px solid #000;。两侧的边框会导致此问题。将宽度减少 2px。

没有边框，效果很好 http://jsfiddle.net/RRvMU/

带边框和一些宽度调整 http://jsfiddle.net/RRvMU/1/