边框不包括在媒体查询的宽度计算中

Question

这导致事情看起来很草率。

有一个div放大到100%，但是右边框被切掉了

在此处查看开发站点 - 它位于 Feed

下

这是我使用 Chrome 开发工具切换边框的图片：

我在这里切换边框：

Answer 1

这是所有 box-sizing:content-box 元素的默认行为，这是所有元素的默认值。将 box-sizing:border-box; 添加到 #at_view。这会导致浏览器在相对宽度计算中包含边框和填充。

Answer 2

甚至可以使用 CSS 规则修改盒子模型等基本内容。

见

更改框模型的默认行为：

#at_view{
  box-sizing:border-box;
}

Answer 3

如果您定义一个宽度为 100% 的元素和一个边框，则边框会添加到 100%，因此这会使总宽度超过 100%，这会导致您的问题（阅读 css 盒子模型：http://www.w3schools.com/css/css_boxmodel.asp).

因此，一种解决方案是您可以将 #at_view 的宽度更改为小于 100%，尝试 90-95% - 直到一切正常。

或者更具体地说，您可以将 #at_view 宽度定义为 100% 并使用 calc() 减去边框：

#at_view { 
  width: calc(100% - 20px);
}

（减去20px，因为看起来20px是边框加上的宽度，因为边框是10px --> 左边10px + 右边10px = 20px。）

Border is not included in width calculation for media queries