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

【问题标题】：Still missing 2px in layout using box-sizing: border-box使用 box-sizing:border-box 在布局中仍然缺少 2px
【发布时间】：2012-07-13 11:39:02
【问题描述】：

概要

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

我知道内联块的空白问题并始终使用该修复程序。即便如此，我还是用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是哪里来的？？？！！！！！！

【问题讨论】：

2px 来自border: 1px solid #000;。两侧的边框会导致此问题。从宽度减小2px。
不带边框，我的朋友。
但是尝试了一些东西，效果很好。看看我的回答。你为什么没有想到使用float？
我不知道你的意思。浮动在上面的原始代码中。

标签： css border-box

【解决方案1】：

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

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

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

【讨论】：

我错过了包装器上的边框，这会减小包装器内部的宽度。所以不是边框：1px solid #000，而是边框：1px solid #fff。