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

除了添加另一个div之外,解决方案很快将使用CSS 3将box-sizing属性添加到CSS规则中.这个新的CSS 3值已经可以在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+ */
}