我有一个div带有这个css规范的：
width:200px;
padding:5px
border:1px solid
另一个div是这个css的孩子：
width:100%
border:1px solid
这些 div 在 FF 和 IE 中呈现如下：
但似乎右边的填充比左边的少！谁能告诉我为什么会导致这种行为？
谢谢
问问题
4001 次
4 回答
9
发生这种情况是因为内部的边界div不是width自身定义的一部分，因此您的内部 div 实际上100% + 2px很宽。
您应该box-sizing: border-box;为内部 div 指定，因此它的宽度将包括边框
有关此属性的更多信息（和浏览器支持），请参阅MDN 文档。
于 2013-08-28T13:33:50.033 回答
4
将其推向右侧的边界。设置box-sizing: border-box为内部 div。
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
于 2013-08-28T13:34:09.467 回答
3
您应该再次检查盒子模型。
您有一个宽度为 100% 的 div 并为其添加了 1px 的边框，因此 div 变为 100% + 2px 宽度，并且像您看到的那样被推到右侧。
您应该删除“宽度：100%”并仅添加边框。（由于 div 是一个块元素，它将占据整个宽度）
您甚至不需要添加 box-sizing，因为 IE7 不支持它。（如果你想要 IE7 支持）
于 2013-08-28T13:34:59.590 回答
0
你的父元素上的溢出是什么？除非我弄错了您将宽度设置为 100% 并带有边框，否则宽度为 200px 的 div 内为 200px，因此边框不会显示。
我的快速解决方案（当然有更好的方法）是使右侧的填充比整体填充多 2px 或左侧少 2px。
于 2013-08-28T13:32:02.577 回答