html - 100% 宽度的 HTML 元素问题

Question

当为某些 HTML 元素(如表单输入)分配 100% 宽度时 - 您不能再应用任何可能影响宽度的其他样式。 border 或 padding 之类的东西会导致元素超过 100%。这会导致笨拙的元素可能在其父元素之外。

因为 CSS 不支持 width: 100% - 2px; 我知道的唯一方法是使用绝对像素宽度 (width: 98px) 或将元素砍掉 100%，这不是一个真正的选择。

<div style="overflow:hidden;">
<input style="width:100%; border: 1px solid #000;" />
</div>

他们还有其他解决方法吗？

Answer 1

连同 adding another div ，解决方案很快就会使用 CSS 3 添加 box-sizing attribute CSS规则。这个新CSS 3 value 已经在 IE 8 和所有其他浏览器中工作 - 所以如果您不介意跳过 IE 6 和 7，您现在可以使用它!

textarea {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}