css - 超出自身边距的 div 标签

Question

无论使用何种浏览器(Chrome、IE、Opera Mobile Emulator 都是我尝试过的)，我都会遇到一个奇怪的问题。我将 div 嵌套在另外两个 div 中，如下所示。这些 div 都设置为 100% 宽度。最里面的元素漂移到父 div 之外(但保持在“之下”)。我没有漂浮任何东西，所以我不明白为什么要这样做。使用 overflow: hidden 没有我能看到的效果。下图显示了 Google Chrome 浏览器的检查元素功能，它显示了超出边距的元素和填充(以桃色显示)。我希望所有内容都在应有的范围内。我开始认为这可能与我正在做的媒体查询有关。我使用这些是因为单个百分比宽度并不总是给我我想要的确切宽度。对我而言，这可能是可耻的愚蠢行为，但有没有人见过这样的事情？

CSS

@media all and (max-width:960px)
{.container{width: 900px; } }

@media all and (max-width:1280px)
{.container{width: 1024px; }}

/*More media queries for a few other max resolutions*/

.container
{
  height: auto;
  min-width: 300px;
  max-width: 1440px;
  margin: 20px auto 0px auto;
  border: 2px solid #13192D;
}

.midwrapper
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}

.innermost
{
  width: 100%;
  margin: 8px auto;
  padding: 8px 8px;
  border: 2px solid #13192D;
} 

Answer 1

添加

box-sizing: border-box;
-moz-box-sizing: border-box;

到

.innermost