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

Question

从这个例子中可以看出,input似乎"溢出"了它的父级div.我想添加填充到它input没有让它溢出它的父.

我想知道每个浏览器(包括IE,Firefox,Chrome等)的最佳解决方案/解决方法.

Answer 1

你可以看到这个答案,但如果你不喜欢它,你可以box-sizing像这样使用CSS3属性:

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