我有一个html元素包含在一个div。高度由外部div指定，输入控件的高度和宽度为100％。在最基本的层面上，我有一个问题，文本框延伸到包含div的右边。
基本示例代码：
<div style="height:25px; width: 150px;">
<input type="text" style="height:100%; width:100%" />
</div>
这个控件的渲染比这更复杂，但是当控件被剥离到这个级别时，我有一个问题，文本框伸出了包含的div。
解决方法
您可以使用Box-sizing：border-Box来处理此问题。只需将以下内容放在你的css文件中：
input{Box-sizing:border-Box}
这意味着输入框上的边框实际上位于输入的宽度内，而不是添加到外部。这是什么使输入大于容器。
保罗·爱尔兰有很好的说明这个技巧http://paulirish.com/2012/box-sizing-border-box-ftw
他对填充的要点也适用于边界。
甚至还有一个指南针mixin来更容易地支持旧的浏览器。 (http://compass-style.org/reference/compass/css3/box_sizing/)
