为什么100%的输入宽度总是超出包含的div？

Question

请注意小提琴:http://jsfiddle.net/cBWaG/4/

我有一个带衬垫的容器.我想要的是输入(文本)从填充内100%宽度.目前虽然它超过了填充.关于如何防止输入超过容器/衬垫而不必使用固定宽度的建议？

谢谢

Answer 1

表单输入真的很难用.并且特别难以使所有浏览器的样式看起来一致.我发现样式文本输入的最佳方法之一是摆脱边框,轮廓,填充和边距.然后将输入包装在div中,其中包含所需的边框,轮廓,填充和边距.

我想我实现了你想要的.看看这个分叉的jsFiddle:http://jsfiddle.net/aP2Ju/

Answer 2

试试这个

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

演示

Answer 3

width标准框模型中元素的属性不包括填充,边距或边框; 它是元素内容的宽度,而不是框本身.盒子的宽度大于填充物的大小.然后添加边框,最后添加边距.

较早版本的IE(v4和5)使用非标准盒子模型,现在称为"Quirks模式".此框模型将填充和边框放置在测量区域内,以便width包含它们的框的属性.这个模型确实可以更容易地拥有100%宽度的盒子.

两种盒子模型都有自己的优势,但IE在实施盒子模型时却违反了标准,这也是开发人员难以更新为IE设计的旧网站只为其他浏览器工作的原因之一.

最近,添加了一个CSS属性,允许设计人员选择他们希望用于其页面上任何给定元素的这些盒子模型.该属性被调用box-sizing,并且当前使用的大多数浏览器都支持该属性; 唯一不支持它的主要是IE6和IE7(其他需要供应商前缀但确实支持它).请参阅此处以获取该功能的浏览器支持表:http://caniuse.com/#search=box-sizing

另一种选择根本就是不设置宽度.一个<div>默认元素设置为填充可用宽度,这基本上意味着100%,但在这样的作品,不管是什么填充和边距设置为,这基本上是你追求的一种方式.如果您已覆盖宽度并想要将其设置回此设置,请使用width:auto;.

希望有所帮助.