如何防止填充的子元素溢出其父元素？答案

【问题标题】：How to prevent padded child element to overflow its parent?如何防止填充的子元素溢出其父元素？
【发布时间】：2012-06-13 11:42:49
【问题描述】：

从this example 可以看出，input 似乎“溢出”了它的父级div。我想在input 中添加填充而不使其溢出其父级。

我想知道每个浏览器（包括 IE、Firefox、Chrome 等）的最佳解决方案/解决方法。

【问题讨论】：

【解决方案1】：

不要将内部 div 的宽度指定为100%。一个 div 将自动适应其父容器的宽度。 Demo

【讨论】：

【解决方案2】：

看起来输入在 div 内，但位于左上角。因为输入占据了 div 的 100% 的宽度，所以它掩盖了 div 的红色背景。 div 较长，因此它伸出底部，使输入看起来像是在顶部。执行以下操作：

将填充应用于外部 div 的 CSS 而不是输入框。
如果需要，您可以对输入应用边距，但我认为填充包含 div 更好。
- 使输入框的宽度小于 div (

【讨论】：

【解决方案3】：

填充会增加对象的宽度。一种选择是从输入中删除左/右填充并仅使用文本缩进，尽管这会删除右填充。

.inside{
    background: blue;
    border: none;
    padding-bottom: 10px;
    padding-top: 10px;
    text-indent: 10px;
    width: 100%;
}

或者，您可以使用百分比，并从宽度中减去该值，而不是使用硬编码的像素宽度作为填充：

.inside{
    padding: 3%;
    width: 94%;
}

【讨论】：

问题不希望输入的文本靠近边框。但是感谢您的提示
嗯，这是我想到的解决方案之一。会看到其他回复，因为我正在寻找最好的方法和跨浏览器解决方案。其他想法是使用 position: absolute;对：0； left:0 并定义一个 width ，然后使用 margin: auto 居中；

【解决方案4】：

你可以看到this answer，但是如果你不喜欢它，你可以使用box-sizing这样的CSS3属性：

input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

【讨论】：

确实是最好的解决方案，可惜是CSS3
@RicardoRodrigues 大多数现代浏览器已经支持此属性，请参阅：caniuse.com/#search=box-sizing
嗯..不知道这么支持。谢谢和抱歉。
@RicardoRodrigues 没问题，如果您的网站是 IE8+，您不会遇到任何问题，但如果您的访问者来自 IE6/7，那么您需要一个 IE 条件 cmets，然后加载其他 CSS覆盖它。