元素上放置一些'padding-right'等于你认为浏览器会给出输入的'px'中多少额外的左右填充/边框。 (对于IE <8，通常为6px。)
这样做会很好，除非不能使用它，因为我的目标是多年来可能不支持这种情况的移动设备。 ： -
我认为移动设备将在计算机之前提供完整的HTML5支持。
@Kindred：如果你在其中包含IEMobile和Blackberry，那绝对不是。
但是，这对桌面浏览器有很大的支持：quirksmode.org/css/contents.html
很棒，但是如果浏览器不支持CSS3，你如何做出后退选项呢？
支持的浏览器：caniuse.com/css3-boxsizing
您还可以添加一个文本缩进，它可以在左侧填充。但这对于右侧或textareas的填充不起作用。
实际上你可以看到几乎所有东西都支持它... caniuse.com/#search=box-sizing
谢谢，这对响应式布局有很大帮助。
+1实际上保存了我头发的剩余部分！
我怎么花这么长时间才找到这个很棒的奶油酱???请问我们能接受这个答案吗？
border-box现在是正确的解决方案。这应该是公认的答案。
非常感谢你做的这些
你可以做的是删除input上的默认"额外"：
input.wide {display:block; width:100%;padding:0;border-width:0}
这将使input保持在其容器内。
现在，如果你想要边框，将input包装在div中，边框设置在div上(这样你也可以从input中删除display:block)。就像是：
编辑：
另一种选择是，不是从input中删除样式，而是在包装的div中对其进行补偿：
input.wide {width:100%;}
这会在不同的浏览器中给你一些不同的结果，但它们不会与容器重叠。 div中的值取决于input上边框的大小以及input和边框之间所需的空间大小。
这是一个非常有创意的解决方案我唯一的问题是，除非我使用JavaScript来更改包装div的边框，否则我无法在文本框中定义轮廓。
@DanHerbert，你是对的，这是这种方法的主要用户体验漏洞
这解决了我的问题！
无需外部div。只需将其应用于您指定的文本框即可。
box-sizing: border-box;
使用此属性"宽度和高度属性(和最小/最大属性)包括内容，填充和边框，但不包括边距"
请参阅w3schools的财产说明。
希望这有助于某人！
非常简单！谢谢！
刚刚遇到这个问题，我能找到的唯一解决方案在我的所有测试浏览器(IE6，IE7，Firefox)中都有以下几点：
将输入字段包装在两个单独的DIV中
将外部DIV设置为宽度100％，这可以防止我们的容器溢出文档
将填充放在精确量的内部DIV中以补偿输入的水平溢出。
在输入上设置自定义填充，使其溢出的内容与内部DIV中允许的量相同
代码：
这里，输入元素的总水平溢出是6px - 2x(填充+边框) - 所以我们为内部DIV设置了一个填充右边6px。
完全适合我。我还没有在IE中完成测试。
好的解决方案，谢谢！
添加到输入元素8px填充，它不再工作
实际上，box-sizing支持非常好：http：//caniuse.com/#search=box-sizing
因此，除非您针对IE7，否则您应该能够使用此属性解决此类问题。像sass或更少的层使得更容易处理像这样的前缀规则，顺便说一句。
实际上，这是因为CSS相对于容器的整个宽度定义了100％，包括其边距，边框和填充;这意味着空间有用。除非容器没有边距，边框或填充，否则其内容的数量小于100％。
这是违反直觉的，并且被许多人广泛认为是我们现在所困扰的错误。它实际上意味着％维度对于除顶级容器之外的任何东西都没有好处，即便如此，只有它没有边距，边框或填充。
请注意，文本字段的边距，边框和填充都包含在为其指定的CSS大小中 - 它是容器的内容。
我通过使用98％可以容忍地解决它，但这不是一个完美的解决方案，因为随着容器变大，输入字段往往会进一步缩短。
编辑：我遇到了这个类似的问题 - 我从来没有尝试过给出的答案，我不确定它是否适用于您的问题，但似乎它会。
如果您不能使用box-sizing:border-box，您可以尝试删除width:100%并在元素中放置一个非常大的size属性，但是缺点是您必须修改html，并且无法使用仅限CSS：
一个可行的解决方案(它适用于我)是在输入(文本框)...或固定宽度为ie7或降低ie7支持时应用负边距。
这导致像素完美的宽度..对我来说它是7所以我添加3和4但它仍然像素完美..
我有同样的问题，我讨厌为边境等额外的div！
所以这是我的解决方案似乎工作！
你应该使用ie7唯一的样式表来避免starhacks。
input.text{
background-color: #fbfbfb;
border : solid #eee 1px;
width: 100%;
-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 32px;
*line-height:32px;
*margin-left:-3px;
*margin-right:-4px;
display: inline;
padding: 0px 0 0 5px;
}
只需将输入设置为偏移量即可进行额外填充。在下面的示例中，输入上的填充将在左侧和右侧为10px，总填充偏移量为20px：
input[type=text]{
width: calc(100% - 20px);
}
这有效：
style="margin: 5px; padding: 4px; border: 1px solid;
width: 200px; width: calc(100% - 20px);">
第一个"宽度"是旧版浏览器的后备规则。
如果您不能使用box-sizing(例如，当您使用iText将HTML转换为PDF时)。试试这个：
CSS
.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; }
.input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }
HTML
如果您不需要动态地执行它(例如，您的表单具有固定宽度)，您可以将子元素的宽度设置为其容器的宽度减去任何装饰，如填充，边距，边框，等等。：
// the parent div here has a width of 200px:
.form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] {
font-size: 16px;
height: auto;
display: block;
width: 280px;
margin-bottom: 15px;
padding: 7px 9px;
}
Copyright © 码农家园
扫一扫
6836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
