当尝试创建跨越容器整个宽度的文本框时，会出现一个常见问题：文本框的实际宽度文本框可能会超出容器的边界。这是因为浏览器默认分配边距、边框和填充，这有效地增加了文本框的整体宽度。
考虑以下示例：
<code class="html"><div id="outer">
<div id="inner">
<input type="text" class="wide" />
<input type="text" class="normal" />
<div style="clear:both;"></div>
</div>
</div></code><code class="css">#outer {
border: 1px solid #000;
width: 320px;
margin: 0px;
padding: 0px;
}
#inner {
margin: 20px;
padding: 20px;
background: #999;
border: 1px solid #000;
}
input.wide {
display: block;
margin: 0px;
width: 100%;
}
input.normal {
display: block;
float: right;
}</code>在这种情况下， “宽”类文本框延伸到容器之外，而“普通”类文本框则与容器的边缘精确对齐。为了防止过度扩展，CSS3中引入的“box-sizing”属性提供了解决方案。
<code class="css">input.wide {
display: block;
margin: 0px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}</code>通过将“box-sizing”设置为“border-box”，文本框的宽度被定义为包括外部填充和边框。这可确保文本框占据其容器的整个宽度，而不会超出其边界。
不幸的是，由于“box-sizing”是 CSS3 属性，浏览器兼容性可能会有所不同。随着规范过程的进行，浏览器为其采用了不同的临时名称：Mozilla 的“moz-box-sizing”和基于 WebKit 的浏览器的“webkit-box-sizing”。
旧版浏览器的替代方法浏览器涉及将“padding-right”应用于父元素（例如“div”或“td”）。这可以帮助容纳输入元素中默认填充和边框占用的额外空间。然而，所需的“padding-right”量可能会根据所使用的浏览器而有所不同。
以上是如何防止宽文本框超出其容器？的详细内容。更多信息请关注PHP中文网其他相关文章！
