应用填充的父元素中宽度为100%的子元素

Question

我有一个 CSS 规格为以下的 div 标签：

width:200px;
padding:5px
border:1px solid

"还有另一个带有这个 CSS 样式的子 div："

width:100%
border:1px solid

这些div在Firefox和IE中呈现的方式如下：
但似乎右侧填充比左侧少！有人能告诉我为什么会出现这种情况吗？
谢谢

- frogatto

Answer 1

这是因为内部 div 的边框不属于 width 的定义范围，所以你的内部 div 实际上会比 100% 宽两个像素。

你应该为内部的 div 指定 box-sizing: border-box; 属性，这样它的宽度将包括边框。

有关此属性的更多信息（和浏览器支持）请参见 MDN文档。

- Fabrizio Calderan

Answer 2

是边框把它推到右边。将 box-sizing: border-box 设置为内部div。

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

- Razz

Answer 3

你需要再次检查盒子模型。

你有一个宽度为100%的div，并在其中添加了1像素的边框，因此这个div的宽度变成了100% + 2px，并向右推动，就像你看到的那样。

你应该放弃“width: 100%”，只添加边框。（由于该div是块元素，它将占用整个宽度）

你甚至不需要添加box-sizing，因为IE7不支持它。（如果您需要支持IE7）

- drip

Answer 4

你的父元素溢出是什么样子？除非我弄错了，你将宽度设置为100％并带有边框，因此宽度在200px内的div中，因此边框不会显示。

我的快速解决方案（肯定有更好的方法）是使右侧填充比整体填充多2px或左侧填充少2px。

- Simon Staton

---

我在父元素上使用了 overflow:hidden，但是没有成功！！ - frogatto

@frogatto 将 border-box 与 overflow hidden 混合使用起作用了。 - Alberto Acuña