如何防止宽文本框超出其容器？

防止宽文本框过度扩展容器

当尝试创建跨越容器整个宽度的文本框时，会出现一个常见问题：文本框的实际宽度文本框可能会超出容器的边界。这是因为浏览器默认分配边距、边框和填充，这有效地增加了文本框的整体宽度。

考虑以下示例：

<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中文网其他相关文章！